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

У меня есть следующее в моем CSS. Все поля / отступы / границы глобально сбрасываются на 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... Почему это происходит?

Опять же, страница отображается нормально. Такое поведение просто сбивает меня с толку.

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

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

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

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

Я не уверен, что это правильный путь, но я решил его, добавив 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%;
}