¿Cómo puedo usar "float: left" en un div sin romper la altura del elemento contenedor?

Question

Parece que los elementos HTML flotantes no expanden las alturas de sus contenedores. Por ejemplo, considere el siguiente código:

.portfoliosite { 
 
    background: #777; 
 
    padding: 10px; 
 
    width: 550px; 
 
} 
 
.portfoliothumbnail { 
 
    background: red; 
 
    margin: 0 10px 10px 0; 
 
    float: left; 
 
    height: 150px; 
 
    width: 150px; 
 
}

<div class="portfoliosite"> 
 
    <div class="portfoliothumbnail"><!-- Img tag goes here --></div>   
 
    <p class="portfoliotitle">AwesomeSite.Com</p> 
 
    <p class="portfoliodescription">An awesome site I did. It launched on Jan 1, 2009</p>   
 
</div>

Aviso cómo el div que contiene con el fondo gris es más corto que el div rojo, y el div roja se extiende fuera de los límites del contenedor. Me gustaría que el elemento contenedor se expanda al tamaño de su contenido, incluido el elemento flotante.

¿Existe una solución elegante para lograr esto, preferiblemente una que no implique establecer una altura fija o usar JavaScript?

Answer 1

Añadir overflow: auto en el elemento que contiene:

.portfoliosite { 
 
    background: #777; 
 
    padding: 10px; 
 
    width: 550px; 
 
    overflow: auto; 
 
} 
 
.portfoliothumbnail { 
 
    background: red; 
 
    margin: 0 10px 10px 0; 
 
    float: left; 
 
    height: 150px; 
 
    width: 150px; 
 
}

<div class="portfoliosite"> 
 
    <div class="portfoliothumbnail"><!-- Img tag goes here --></div>   
 
    <p class="portfoliotitle">AwesomeSite.Com</p> 
 
    <p class="portfoliodescription">An awesome site I did. It launched on Jan 1, 2009</p>   
 
</div>

Ver: http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats

Answer 2

Debe borrar el flotador, que devuelve el flujo de documentos a la normalidad. Use clear:left (o derecha, o ambas si es necesario eliminar dichos flotantes) en el último elemento que debe restablecer el flujo. También lea en ClearFix. Cabe señalar que ClearFix puede ponerse un poco pegajoso con IE ... si tiene control sobre el marcado, a veces es más seguro utilizar el claro tradicional.

Answer 3

es necesario borrar el flotador Clear Fix

Some more information

Answer 4

Renders bien en mi IE7 en Vista. ¿Qué versión de IE & qué plataforma estás usando?

Answer 5

Sí. Debes borrar tu flotador cuando div cierre.

<div> 
    <div style="float:left">Floated Div</div> 
    <div style="clear:both;" /> 
</div> 

Answer 6

, lo recomiendo no utilizar cortes como CLEARfix. Si está intentando guardar un < div class = "clear"> </div> porque no es "semántico", se creará un problema en el futuro. Lo mejor, si sabe que su diseño no cambiará, o puede estar seguro de cuál es el próximo elemento, puede usar el siguiente elemento para borrar los "flotantes" anteriores. Si necesita algo modular, como un fragmento de HTML que se puede insertar en varios lugares, agregue siempre el DIV de compensación.

También en relación con el comentario de David:

<div style="clear:both;" /> 

tener cuidado ya que no es válida HTML o XHTML. Aunque parece válido desde un punto de vista XML, no respeta la definición del documento (como se llame, a la que se hace referencia mediante la etiqueta DOCTYPE). En otras palabras, el DIV se define como un elemento que se abre y se cierra con una etiqueta de cierre por separado. Contrariamente a un < BR /> por ejemplo, que permite el "cierre automático". De acuerdo, Firebug y posiblemente otras herramientas de desarrollo web, a veces muestran los DIV de esa manera, pero así es como lo muestran.

PPS: en mi trabajo he encontrado que esto funcionó bien en algunos diseños para fijar el espaciado vertical entre elementos inconsistentes al quitar DIVs en IE6 y otros navegadores:

Cruz navegador de compensación:

div.clear { clear:both; overflow:hidden; height:0; } 

<div class="clear"></div> 

No use un estilo en línea para esto, nunca. Primero lo necesitará a menudo, y segundo, como puede ver arriba, puede ser útil cambiar la regla clara para corregir algunos problemas del navegador cruzado.