clearfix hack
Aqui hay una situación extraña que puede pasar cuando usas float:
img {
float: right;
}
<div>
Uh oh... esta imagen es mas alta que el elemento que la contiene, y está flotando, ¡y se sale de su contenedor!
Hay una manera de arreglar esto, pero es un poco fea. Se llama clearfix hack.
Intentemos añadir esto a nuestro CSS:
.clearfix {
overflow: auto;
}
Ahora veamos lo que pasa:
<div class="clearfix">
¡Mucho mejor!
Esto funciona con navegadores modernos. Si quieres soportar IE6 necesitarás añadir lo siguiente:
.clearfix {
overflow: auto;
zoom: 1;
}
Hay navegadores exóticos que requieren atención extra. El mundo del clearfixing es bastante espantoso, pero esta simple solución funcionará para la mayoría de los navegadores de hoy en día.
