Flotando en la incertidumbre

20/jul/2006 41

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. aNieto2K - » Flotando en la incertidumbre [#]

    [...] Genial artículo con el que comprenderás por que esas capas voladoras por nuestra página nunca están donde quieres que estén. Sabiendo el por que comprenderás como solucionarlo. [...]

  3. 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 ;-)

  4. CSSLab Admin [#]

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

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

    .)

  6. Ismael [#]

    Muy bien explicado Jorge!

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

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

  9. EstadoBeta » Archivo » Despejando Floats para IE7 [#]

    [...] Mediante el m

  10. CSSLab » Columnas de igual alto [#]

    [...] Artículos con tags similares Centrado Vertical con CSS (actualizado)Agregando movimiento vía JavaScriptTransparencias a prueba de browsersLo ví y me gustó 17Más estilos a las listas¡Aaaaabajo!Formularios Semánticos: el regresoSEO y la web semánticaLo ví y me gustó 18Ahorrando hasta en códigoRecursos GráficosEvangelizandoCargando imágenes con CSSLightbox + SWFLayout Fijo: resucitando los framesCSS en Flash: sólida parejaBordes redondos crossbrowserFlotando en la incertidumbreDiseño a oscuras [...]

  11. CSSLab » .clearfix: el widget [#]

    [...] Artículos con tags similares Transparencias a prueba de browsersCentrado Vertical con CSS (actualizado)¡Aaaaabajo!Flotando en la incertidumbreColumnas de igual altoLo ví y me gustó 17Ahorrando hasta en códigoMás estilos a las listasEvangelizandoFormularios Semánticos: el regresoCargando imágenes con CSSLightbox + SWFLayout Fijo: resucitando los framesCSS en Flash: sólida parejaBordes redondos crossbrowserDiseño a oscuras [...]

  12. 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)

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

  14. Columnas 1 « Taller de produccion web UNIACC [#]

    [...] Clase CSS “Clearfix”, usada para solucionar contenedores que colapsan cuando su contenido son floats. La clase original la encuentran en PositionIsEverything. Explicación en español en CSSLab. [...]

  15. Columnas 1 « Desarrollos para Internet [#]

    [...] Clase CSS “Clearfix”, usada para solucionar contenedores que colapsan cuando su contenido son floats. La clase original la encuentran en PositionIsEverything. Explicación en español en CSSLab. [...]

  16. CSSLab » Layout Híbrido [#]

    [...] Artículos con tags similares estilos de botones crossbrowserTexto auxiliar con estiloCentrando Horizontalmente (a prueba de IE)menúes y la class .selectedColumnas de igual altoLa verdadera !importanciaSelectores avanzados de atributosAgregando movimiento vía JavaScriptTransparencias a prueba de browsersCentrado Vertical con CSS (actualizado)Lo ví y me gustó 17Más estilos a las listas¡Aaaaabajo!Formularios Semánticos: el regresoPropiedades del olvido: visibilityIE7 { css2: auto; }El contorno de la discordiaNuevo sitio, nuevos métodos+ bordes redondosDiseño para móviles: referencia.clearfix: el widgetSEO y la web semánticaLo ví y me gustó 18Ahorrando hasta en códigoRecursos GráficosEvangelizandoCargando imágenes con CSSLightbox + SWFLayout Fijo: resucitando los framesCSS en Flash: sólida parejaBordes redondos crossbrowserFlotando en la incertidumbreDiseño a oscuras [...]

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

  18. Jazazu [#]

    Disculpa ¿como se utiliza el clearfix?

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

  20. MiTaGo [#]

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

    Enorabuena

  21. 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 :D

  22. 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)

  23. Daniel G. Blázquez [#]

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

  24. Flotando en la incertidumbre at DGWAOO [#]

    [...] como comentó acertadamente newdisco, se acerca estrepitosamente una gran actualización de los 2 principales browsers actuales: IE7 y [...]

  25. CSS Clearfix — Freak Group [#]

    [...] CSSLab esta explicado con más detalles como se utiliza esta técnica CSS Clearfix. « [...]

  26. » Pronto… | CSSLab [#]

    [...] Flotando en la incertidumbre [...]

  27. DGWAOO » Flotando en la incertidumbre [#]

    [...] como comentó acertadamente newdisco, se acerca estrepitosamente una gran actualización de los 2 principales browsers actuales: IE7 y [...]

  28. CSSLab » Esas botoneras: centrándolas [#]

    [...] se usa float alguno, lo que no hace el contenedor colapsar así que nos ahorramos un clearfix. Además que no puedes centrar un [...]

  29. BUFFFFF [#]

    mil gracias por esto joeeer me estaba rallando mogollón

  30. CSSLab » clearfix ultimate [#]

    [...] han sido las veces que he nombrado y recontra-aplicado el método de .clearfix aquí en CSSLab. Lo suelo nombrar a menudo [...]

  31. CSSLab » Overflow en IE6 [#]

    [...] probablemente esta es la solución. Pero cuidado, si tienen elementos flotando, quizás algún método de clearfix a la misma caja contenedora será [...]

  32. Despejando Floats para IE7 [#]

    [...] Mediante el método tradicional de eliminar pequeños bloques de código a la vez, llegué a descubrir un sospechoso inesperado (la información está en la web, pero le estoy poniendo dramatismo). Se acuerdan de la clase clearfix? La he recomendado varias veces en este sitio y su objetivo es eliminar un molesto problema cuando tienes varios floats dentro de un DIV contenedor (¿más detalles? Jorge lo explica letra por letra). [...]

  33. CSSLab - Floatfix: un nuevo clearfix [#]

    [...] todos es conocido y utilizado Clearfix; luego les comenté sobre Clearfix Ultimate (bautizado por mí) y que me ha sido de [...]

  34. 7blog » Clearfix ultimate Diseño y Desarrollo Web [#]

    [...] han sido las veces que he nombrado y recontra-aplicado el método de .clearfix aquí en CSSLab. Lo suelo nombrar a menudo en clases, [...]

  35. Alca [#]

    ¡muchas gracias! me ha sido muy útil

  36. Developer [#]

    Este tips me ha sido muy util!!! Gracias

  37. 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!

  38. Heisler [#]

    Hey en que paró todo esto?

  39. Displayfix: lo último en clearfix ↝ CSSLab [#]

    [...] pasado 5 años desde el primer artículo donde describí exhaustivamente la causa y solución má…. Y me asombra que sigan apareciendo soluciones diferentes e innovadoras a este problema que es [...]

  40. 100% alto, finalmente para todos ↝ CSSLab [#]

    [...] deben tener es que si están flotando las cajas, su contenedor colapsará. Para esto, .clearfix será la solución [...]

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab