Обертывание размер DIV элемент равен нулю

Question

I have the following nested elements : 

<div class="simple-score-bar"> 
<span class="score-heading">heading</span> 
<div class="score-wrapper"> 
    <div class="score-label"> 
     <span>76</span> 
    </div> 
    <div class="score-chart"> 
     <div> 
      <svg> 
       <g> 
        <rect width="400px" height="30px"></rect> 
        <g> 
         <rect width="100px" height="30px"></rect> 
        </g> 
       </g> 
      </svg> 
     </div> 
    </div> 
</div> 

Вопрос заключается в том, что score-bar и score-wrapper высоты DIV являются 0, когда я осмотреть их. Интересно, почему это происходит.

CSS:

.simple-score-bar { 
    font-family :'Open Sans Bold', 'Open Sans'; 
    .score-heading { 
    fill: #3D7CD1; 
    font-style: normal; 
    word-wrap: break-word; 
    font-size: 15px; 
    } 
    .score-wrapper { 
    .score-chart { 
     float: left; 
     width: 80%; 
     .score-legend { 
     font-size: 10px; 
     font-style: normal; 
     color: #778599; 
     line-height: normal; 
     font-family: 'Open Sans'; 
     .score-left { 
      float: left; 
     } 
     .score-right { 
      float: right; 
     } 
     .score-text { 
      font-weight: 700; 
     } 
     .score-value { 
      font-weight: 400; 
     } 
     } 
    } 
    .score-label { 
     float:left; 
     word-wrap: break-word; 
     font-size: 16px; 
     font-style: normal; 
     margin-right: 3%; 
    } 
    } 

} 

Answer 1

Вы можете использовать clearfix на этих элементах.

Когда вы плаваете элементы, вы вынимаете их из нормального потока документов. Родительский элемент, в котором они проживают, будет относиться к ним так, как если бы они не занимали места. Если все элементы внутри другого элемента будут перемещены, он будет рушиться и вести себя так, как будто это пустой элемент визуально.

Использование clearfix позволяет этим перемещаемым элементам занимать место внутри родителя. Это полезно, если вы применяете границу или цвет фона для родительского элемента плавающих элементов.

.cf:before, 
.cf:after { 
    content: " "; /* 1 */ 
    display: table; /* 2 */ 
}  
.cf:after { 
    clear: both; 
} 

Элементы с плавающим уровнем блока будут уменьшаться до размера их содержимого. В результате вам может понадобиться очистить некоторые плавающие элементы, если вы хотите, чтобы они отображались ниже ранее перемещаемого элемента.

div { 
 
    float: left; 
 
    width: 50px; 
 
    height: 15px; 
 
    border: 1px solid gray; 
 
    margin: 3px; 
 
    } 
 
div:nth-of-type(3) { 
 
    clear: left; /* move third div to the next line */ 
 
    }

<div class="one"></div> 
 
<div class="two"></div> 
 
<div class="three"></div>

Answer 2

Проблема заключается в том, что ни один из поплавков в вашем коде не будут удалены, так что внешние дивы действительно не имеют какое-либо ощутимое содержания.

Решение должно быть поплавки очищается после окончания дивы они появляются в.

.simple-score-bar::after, .score-wrapper::after { 
    clear:both; content:''; display:block; height:0; 
} 

См JSFiddle, где я включаю некоторые Javascript, чтобы сообщить высоту бальной-обертки.