clearfix hack

Aquí hay una situación extraña que puede pasar cuando usas float:

img {
  float: right;
}
<div> An Image

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"> An Image

¡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.

  • Creative Commons License
  • Ads by Bocoup