Почему высота родительского 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 отображается как высотой 0 пикселей . Я ожидал, что он расширится до конца div.content и div.lbar ... Почему это происходит?

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