Actualización: ya está disponible un artículo más completo sobre los flotadores: Todo sobre los flotadores
Has oído hablar de los “flotadores de limpieza”, pero ¿realmente lo entiendes? Todo el problema es que los objetos flotantes no aumentan la altura del objeto en el que residen correctamente. Como puede ver a continuación, estos divs con la clase “floated_box” están dentro del div “main_container”, sin embargo, en la página están fuera de ese div contenedor.
#main_container {
width: 400px;
margin: 20px auto;
border: 2px solid #cccccc;
padding: 5px;
}
.floated_box {
float: left;
width: 100px;
height: 100px;
border: 1px solid #990000;
margin: 10px;
}<div id="main_container">
<p>Some content.</p>
<div class="floated_box"></div>
<div class="floated_box"></div>
<div class="floated_box"></div>
<div class="floated_box"></div>
<div class="floated_box"></div>
</div>
Todo lo que tenemos que hacer es limpia el flotador, y todo este problema desaparece. Pon este div vacío DESPUÉS de tu último objeto flotante:
<div style="clear: both;"></div>Y obtienes esto:
Esta solución agrega un marcado inútil, que es antitético al tao de CSS, pero es una solución fácil para todos los navegadores que no lo decepcionará.