¿Por qué la altura del div principal es cero cuando ha flotando hijos?

Tengo lo siguiente en mi CSS. Todos los márgenes / rellenos / bordes se restablecen globalmente a 0.

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

Ahora cuando escribo mi HTML como

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

La página se representa correctamente. Sin embargo, cuando inspecciono los elementos, div#wrapperse muestra como 0pxalto. Hubiera esperado que se expandiera hasta el final de div.contenty div.lbar... ¿Por qué sucede esto?

Nuevamente, la página se muestra bien. Este comportamiento me deja perplejo.

El contenido que está flotando no influye en la altura de su contenedor. El elemento no contiene contenido que no esté flotando (por lo que nada impide que la altura del contenedor sea 0, como si estuviera vacío).

La configuración overflow: hiddenen el contenedor evitará eso al establecer un nuevo contexto de formato de bloque . Consulte los métodos para contener flotantes para otras técnicas y contener flotantes para obtener una explicación sobre por qué CSS se diseñó de esta manera.

Por lo general, floatno se cuentan en el diseño de sus padres.

Para evitar eso, agregue overflow: hiddenal padre.

No estoy seguro de que esta sea una forma correcta, pero lo resolví agregando display: inline-block;al contenedor wrap 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%;
}