html - pantalla - height dinamico css

¿Por qué la altura de mi div es cero?

Question

Tengo lo siguiente en mi CSS. Todos los márgenes / paddings / 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#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 rinde bien. Este comportamiento me deja perplejo.

Answer 1

El contenido que está flotando 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 de overflow: hidden en el contenedor lo evitará estableciendo un nuevo contexto de formato de bloque . Consulte los métodos para contener flotadores para otras técnicas y que contengan flotadores para obtener una explicación sobre por qué CSS se diseñó de esta manera.

Answer 2

No estoy seguro de que este sea un camino correcto, pero lo resolví agregando display: inline-block; a la envoltura 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%;
}

Answer 3

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

Para evitar eso, agregue el overflow: hidden para el padre.