Flotando en la incertidumbre

20/Jul/2006 233

Seguro uno de los temas más complicados al momento de construir un sitio tableless, se refiere a los float. Entenderlo y saber utilizarlo es un lío. Esto se complica más al momento de hacer que el sitio se vea bien en los browsers, un dolor de cabeza (Firefox es muy sensible en problemas con floats). Para ayudar en esto, existen varios hacks, o mejor, tips que facilitan la vida. Lo siguiente es una manera de manejar los floats, principalmente cuando existen varios elementos dentro de un mismo div. Juntos, suelen comportarse de manera extraña.

A la antigua.

Cuando un float está contenido dentro de otro contenedor (burp, redundancia….. pero se entiende) que tiene borde o fondo visible (para que se note el problema, ver img1), el float no fuerza automáticamente el borde inferior del contenedor principal a medida q este float se agranda. A su vez, el float es ignorado por el contenedor y se verá colgado del borde superior (esto no pasaba con las tablas…. maldición!). Para esto, la W3C sugiere usar un elemento clear al final de la caja contenedora, forzándolo a despejar este elemento incluído. Lo que hará, por ejemplo, un { clear: both; } al final del contenedor, será extender el margen inferior hasta que se ‘despeje’ (clear) hasta el final del float.

Float a la antigua

A la moderna.

Un nuevo método ha irrumpido hace algún tiempo ya en el mundo del desarrollo web: clearfix. Elementos de despeje ‘clear’ no son utilizados. En cambio, se usa una propiedad CSS2 :after. Esta propiedad permite que se agregue nuevo contenido al final de un elemento a través del CSS. Esto significa que no se requiere modificar el HTML. El contenido es especificado dentro de la hoja de estilos, y aparece en la página web como un elemento HTML real que ha sido insertado siguiendo el normal contenido. Contenido generado con :after no puede recibir algunas propiedades CSS, como position o float, pero clear sí es permitido. Imagina que usamos :after para insertar un simple caracter, un punto. A este punto se le despeja con { clear: both; }. Eso es todo. Pero no queremos que ese punto se vea, menos que se note. Por ello. utilizamos { height: 0; } y {visibility: hidden;} para esconderlo. Primitivamente, el código es el siguiente:

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

Ahora, como nada es simple en la vida, hay que hacer algunas modificaciones aún para que todos los browsers permitan un uniforme despliegue del float. Un simple hack para IE es necesario, ya que este browser no soporta :after. Pero posee un efecto de autodespeje, y es precisamente de él que nos colgaremos para este caso. Le diremos a IE/Win que vea un alto de 1% del contenedor.

/* Esconde de IE-mac \*/
* html .clearfix {height: 1%;}
/* Fin esconde de IE-mac */

Queda un detalle aún. Sí, nuevamente IE, pero para Macintosh. Son los menos, los restantes de un relegado a tercer plano, pero quedan. Existe otro hack que ayuda a este navegador con este mismo problema, pero utilizando { display: inline-table; } a la clase .clearfix, y escondiéndolo de todos los otros browsers. Finalmente, el código completo es el siguiente:

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Sólo debes agregar esta clase .clearfix al contenedor principal (class="clearfix"). Algunos acostumbran a agregar este clearfix a todas sus hojas de estilo. No debería de causar ningún problema con los otros elementos del sitio web.

Float con clearfix

Ojalá haya despejado más de una duda y un float.

Link: Position is Everything

UPDATE: como comentó acertadamente newdisco, se acerca estrepitosamente una gran actualización de los 2 principales browsers actuales: IE7 y Firefox 2. Y no podemos dejarlos al margen, ya que, por lo menos en el caso de IE7, será un gran y temible paso en cuanto al desarrollo web y cómo arreglar todos los hacks habidos y por haber. Leyendo por la web, investigué cómo se comporta clearfix con estos 2 navegadores, y desde ya se pueden encontrar soluciones, ya que ambos programas están en sus fases finales de desarrollo y pruebas y están cerrados sus soportes respecto a CSS. Vamos por parte:

IE7: El más problemático por lejos, y como se predice, lo será siendo. Microsoft ha llamado a que se deje de hacer hacks para IE6, ya que en IE7 estarán solucionados estos problemas. Pero, obviamente, no todos los usuarios se cambiarán al instante a este nuevo navegador. Seguro pasarán años, o hasta que saquen IE8 y aún así habrán muchos usuarios con IE5.5 e IE6. Enfin, más líos. Respecto al clearfix, IE7 continuará no soportanto pseudoclases (:after), por lo que el problema continúa. Se ha descubierto un truco que relaciona { display:inline-block; } seguido de un { display:block; } para la regla de despeje original. Luego, claro, para IE6 la clase con su { height: 1%; }.

.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
} .clearfix {
display:inline-block;
}
.clearfix {
display:block;
}
* html .clearfix {
height:1px;
}

El problema es que al parecer el HollyHack (* html) no será soportado más, o mejor dicho, serán solucionados los bugs q permitían esos hacks. Por ello, se discute esta variación en el clearfix para IE7, donde se aprovecha la propiedad zoom de MS:

<!--[if lt IE 7]><style>
/* style for IE 6 + IE5.5 + IE5.0 */
.gainlayout { height: 0; }
</style><![endif]-->
<!--[if IE 7]><style>
.gainlayout { zoom: 1;}
</style><![endif]-->

Esto por ahora. Como el browser aún está en desarrollo, y es de Microsoft, podemos esperar cualquier cosa.

Firefox 2: aún estoy investigando sobre ello…

Links:

Comentarios

  1. newdisco [#]

    wow! asi con las cajitas flotantes
    creo que prefiero el old style method del clear both, pero bueee esperemos firefox 2 e ie7 para ver como se comportan

  2. Enrique [#]

    Es una de las cosas que más trabajo cuesta aprender cuando se empieza a flotar capas. Seguro que sirve de ayuda a mucha gente 😉

  3. CSSLab Admin [#]

    Buen punto lo de FF2 e IE7. Aver si luego completo y profundizo con ese tema.

  4. Nezara [#]

    Amigos este artículo es el mejor que he visto en mucho tiempo, me salvó la vida, tenía un problema en firefox con background, no se veía en este navegador, ahora sólo me queda agradecer.

    .)

  5. Ismael [#]

    Muy bien explicado Jorge!

  6. Orlando Gonzales Gamarra [#]

    Gracias amigo, por este post, ya me habia roto la cabeza tratanto de hacer caber un div dentro de otro… de saberlo antes no hubiera perdido hacerlo…

  7. Rodrigo [#]

    Estoy recien aprendiendo css y ese fue uno de mis grandes problemas a la hora de experimentar con xhtml y css, aunque para mi la solucion fue usar overflow: hidden; en la caja contenedora.

  8. Ernesto [#]

    En mi opinión y tomando en cuenta el soporte de pseudo clases, creo que la solución más rápida y fácil es la ‘antigua’: un simple elemento con un clear:both. Lo he usado siempre porque es más fácil de usar y recordar. Lo único malo es el hecho de tener que interferir en la estructura del html.

    Saludos!
    :0)

  9. CSSLab Admin [#]

    ernesto, buen punto, pero como te respondiste: la idea del uso de hojas de estilos es no tener q alterar el HTML para hacer algun cambio. sino imaginate ponerle un
    en un portal con mas de 300 paginas….. clearfix funiocna de maravilla con browsers 5.5+. salu2

  10. Paluh [#]

    Hola, muchas gracias por tu articulo, esta muy bien y práctico.

    Desde hace tiempo vengo resolviendo el problema de los floats a la antigua. ya me inserto en la moderna jeje

    Saludos

  11. Jazazu [#]

    Disculpa ¿como se utiliza el clearfix?

  12. CSSLab Admin [#]

    Jazuzu, veo q leiste el articulo. clearfix es una class, se la agregar a tu contenedor q colapsa. «Sólo debes agregar esta clase .clearfix al contenedor principal (class=»clearfix»)». salu2.

  13. MiTaGo [#]

    Buaaaa, enorabuena, funciona perfectamente. Y todo simplemente definiendo el class y asignandolo al contenedor.

    Enorabuena

  14. GHN [#]

    Me ha servido de ayuda. En el FF las cajas internas se salían de la principal x_x pero con este método hace lo que quiero. Namás soluciono otro problemilla que tengo pendiente y estaré feliz 😀

  15. joselito [#]

    También me parece mejor la antigua… de esta forma insertas contenido innecesario, es cómo insertar carácteres en blanco para hacer espacios. Con la antigua, sólo hace falta tener en cuenta la normal de que un no flotante no detecta a los flotantes (y que el margin auto no funciona en versiones anteriores de Explorer)

  16. Daniel G. Blázquez [#]

    Overflow:hidden es la solución definitiva y sustituye la anticuada técnica clearfix.

  17. BUFFFFF [#]

    mil gracias por esto joeeer me estaba rallando mogollón

  18. Alca [#]

    ¡muchas gracias! me ha sido muy útil

  19. Developer [#]

    Este tips me ha sido muy util!!! Gracias

  20. elandy2009 [#]

    Me vino bien para un layout que estoy haciendo. ¡Gracias! Solo tenía que poner un DIV con la clase «clearfix» debajo de los dos DIV con la propiedad «float» y pude arreglar la página. Lo mejor de todo es que ¡el clearfix pasa la validación y todo!

    ¡Gracias! ¡Muy buen blog!

  21. Heisler [#]

    Hey en que paró todo esto?

CSSLab