¿Por qué la altura de mi div es cero

Question

Tengo lo siguiente en mi CSS. Todos los márgenes/rellenos/fronteras a nivel mundial se restablecen 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#wrapper se muestra como 0px alto. Hubiera esperado que se expandiera hasta el final de div.content y div.lbar ... ¿Por qué sucede esto?

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

Answer 1

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

Configuración overflow: hidden en el contenedor se evitará mediante el establecimiento de un nuevo block formatting context. Vea methods for containing floats para otras técnicas y containing floats para una explicación sobre por qué CSS fue diseñado de esta manera.

Answer 2

Por lo general, float s no se cuentan en el diseño de sus padres.

Para evitar eso, agregue overflow: hidden al padre.

Answer 3

No estoy seguro de que esto sea correcto, pero lo resolví agregando "display: inline-block;" a la envoltura div.

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

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

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