Почему у моего div нет высоты?

Question

Я пытаюсь подражать механизму строки-столбца, который использует CSS-сценарий twitter.

У меня есть div, содержащий некоторые другие div, которые сами содержат содержание. В моем инспекторе элементов он показывает, что контейнер не имеет высоты. Должна ли высота div быть высотой элементов, которые она содержит?

<div class="container"> 
    <div class="row yellow"> 
     <div class="column-1 red"> 
      column-1 
     </div> 

     <div class="column-1 blue"> 
      column-1 
     </div> 

     <div class="column-1 green"> 
      column-1 
     </div> 

     <div class="column-1 orange"> 
      column-1 
     </div> 

     <div class="column-1 red"> 
      column-1 
     </div> 

     <div class="column-1 blue"> 
      column-1 
     </div> 

     <div class="column-1 green"> 
      column-1 
     </div> 

     <div class="column-1 orange"> 
      column-1 
     </div> 

     <div class="column-1 red"> 
      column-1 
     </div> 
    </div> 
</div> 

Вот jsfiddle:

HTML/CSS in question

Answer 1

Причина, по которой высота или контейнеры равны 0, состоит в том, что вы плаваете по всему содержанию, а плавающие элементы не расширяют высоту (или ширину) их родителей.

Поскольку вы плаваете все эвенты в row, он имеет 0 высоту, и поэтому имеет .container.

Чтобы предотвратить это, вы можете:

1. установить overflow:hidden; на контейнерах demo
2. ясно поплавок с блочным элементом в конце контейнера с clear:both;demo

Вы также можете проверить этот вопрос для справки: How do you keep parents of floated elements from collapsing?

Answer 2

Потому что вы не назначили высоту в контейнер. Вот почему, когда вы проверяете элемент, нет высоты.