Micaela 10 de diciembre de 2009 a las 14.14
   Imprimir artículo
elWebmaster.com

CSS: El nuevo método Clearfix para quitar floats


css-bisEl famoso hack clearfix, o “hack de limpieza fácil”, es un método útil para quitar floats. Si bien el hack original funciona bien, los navegadores a los que apunta son obsoletos o ya se han quedado en el camino.

Es por eso que en esta nota le decimos adiós al clearfix original y les traemos un nuevo método clearfix mejorado. ¿Están preparados?

El hack Clearfix original luce así:

  1. .clearfix:after {
  2.     visibility: hidden;
  3.     display: block;
  4.     font-size: 0;
  5.     content: " ";
  6.     clear: both;
  7.     height: 0;
  8.     }
  9. .clearfix { display: inline-table; }
  10. /* Hides from IE-mac \*/
  11. * html .clearfix { height: 1%; }
  12. .clearfix { display: block; }
  13. /* End hide from IE-mac */

Si, es feo, pero funciona muy bien a la hora de permitirle a los diseñadores quitar floats sin ocultar el desbordamiento y establecer un ancho.

La lógica detrás de este método funciona de esta manera:

  • Obtiene los navegadores compatibles con el primer bloque de declaraciones (si todos los navegadores fueran compatibles de forma estandar, esto sería lo único que se necesitaría) y crea un bloque de limpieza oculto después del contenido del elemento objetivo.
  • La segunda declaración aplica una  propiedad de mostrar inline-table, exclusivamente para el beneficio de IE/Mac.
  • En este punto, utilizamos el hack comment-backslash para esconder el recordatorio de las reglas de IE/Mac. Esto nos permite hacer lo siguiente:
  • Aplicar una altura de 1% sólo a IE6 para activar hasLayout (que se requiere para que el hack funcione)
  • Re-aplicar display:block a todo excepto a IE/Mac

Como pueden ver, esto es demasiado alboroto para un explorador que ha estado muerto por lo menos durante los últimos tres o cuatro años. Ya nadie usa el IE /Mac, así que es momento de bajarse del clearfix hack. El resultado es un CSS mucho más limpio y más eficiente:

  1. /* new clearfix */
  2. .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
  3. * html .clearfix { zoom: 1; } /* IE6 */
  4. *:first-child+html .clearfix { zoom: 1; } /* IE7 */

Tengan en cuenta que hemos mejorado la clearfix hack añadiendo soporte para IE7. Ni IE6 ni IE7 soportan la pseudo-clase :after utilizada en la primera declaración, así que necesitamos un método alternativo para la aplicación de clearfix. Afortunadamente, aplicando zoom: 1 a cualquiera de los navegadores activa el mecanismo hasLayout propietario de IE, que funciona muy bien para borrar el float. Esto lo logramos con un par de selectores válidos específicos de estos navegadores, pero deben tener en cuenta que los “comentarios condicionales” son el método recomendado para hacer esto.

Afortunadamente, IE8 soporta la pseudo-clase :after, por lo que este nuevo método se volverá todavía más simple, eventualmente, cuando IE6 y 7 desaparezcan.

En resumen, el nuevo método clearfix aplica reglas de limpieza para los navegadores compatibles utilizando la pseudo-classe :after.  Para IE6 e IE7, el nuevo método clearfix activa hasLayout con algo de CSS. Por lo que, el nuevo método Clearfix elimina de forma efectiva floats en todos los navegadores más comunmente usados sin la necesidad de utilizar hacks.

Fuente: Perishable Press


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (4)

  1. gloton dice:

    he encontrado a varios lados que hablan de clearfix, pero no he encontrado donde expliquen como aplicarlo, es decir, un ejemplo, mesclando esta tecnica con html

  2. elandy2009 dice:

    Es que el clearfix se coloca en la DIV que va a contener elementos flotantes.

  3. John dice:

    El clearfix actual no pasa el Validador de la 3WC.org para CSS. Y piden aplicar el clearfix original. Pueden hacer la prueba y se darán cuenta.

  4. Ernesto Tarrillo dice:

    El clearfix es una clase, por lo tanto si tienes:

    hola esto es la caja 1
    hola esto es la caja 1

    Así es div.contenedor limpia los floats de #caja-1 y #caja-2

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder