clearfix hack

Aquí 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.