Почему высота родительского элемента div равна нулю, если в него помещены дочерние элементы?

В моем CSS есть следующее. Все поля/прокладки/границы во всем мире reset равны 0.

#wrapper{width: 75%; min-width: 800px;}
.content{text-align: justify; float: right; width: 90%;}
.lbar{text-align: justify; float: left; width: 10%;}

Теперь, когда я пишу свой HTML как

<div id="wrapper">
    <div class="content">
        some text here
    </div>
    <div class="lbar">
        some text here
    </div>
</div>

страница отображается правильно. Однако, когда я проверяю элементы, div#wrapper отображается как 0px высокий. Я бы ожидал, что он расширится до конца div.content и div.lbar... Почему это происходит?

Опять же, страница выглядит отлично. Такое поведение просто озадачивает меня.

Ответ 1

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

Настройка overflow: hidden на контейнере позволит избежать этого, установив новый блок форматирования. См. методы для размещения float для других методов и содержащий поплавки для объяснение того, почему CSS был разработан таким образом.

Ответ 2

Обычно float не учитываются в макете своих родителей.

Чтобы предотвратить это, добавьте overflow: hidden к родительскому.

Ответ 3

Я не уверен, что это правильный путь, но я решил это, добавив display: inline-block; к обертке div.

#wrapper{
    display: inline-block;
    /*border: 1px black solid;*/
    width: 75%;
    min-width: 800px;
}

.content{
    text-align: justify; 
    float: right; 
    width: 90%;
}

.lbar{
    text-align: justify; 
    float: left; 
    width: 10%;
}