Flotando en la incertidumbre

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:

Sobre el Autor: Jorge Epuñan

Soy quien escribe en este sitio: diseñador gráfico de profesión, desarrollador web por preferencia y amante de la interacción humano-computador. Cuando no pienso en web, salgo a trotar por mis barrios en Santiago, Chile o me junto con amigos a un bar a conversar sobre nuevas tendencias y tecnologías. Twitter profesional y personal, además del Contacto.

Relacionados

clearfix ultimate

Muchas 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, ya que es el método más fácil de entender y sobrellevar el colapso de cajas contenedoras de ventanas flotantes. Fácil porque basta con aplicar una class="clearfix" y nuestra caja vuelve a [...]

Displayfix: lo último en clearfix

Han pasado 5 años desde el primer artículo donde describí exhaustivamente la causa y solución más común de clearfix. Y me asombra que sigan apareciendo soluciones diferentes e innovadoras a este problema que es transversal a todos los browsers. En este artículo, muestro y demuestro el más simple (pero no versátil) de los que existen [...]

Floatfix: un nuevo clearfix

Ya es lunes, llego a revisar mis 600 RSS‘s que me esperan acumulados por el fin de semana y me quedo con un artículo que me llama la atención. Lo leo, lo analizo, lo pongo en práctica y ¡Zaz! Un nuevo paradigma se forma. Por todos es conocido y utilizado Clearfix; luego les comenté sobre [...]

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

    newdisco
    20 / Julio / 2006

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

    Enrique
    21 / Julio / 2006

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

    CSSLab Admin
    21 / Julio / 2006

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

    .)

    Nezara
    21 / Julio / 2006

  5. Muy bien explicado Jorge!

    Ismael
    25 / Julio / 2006

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

    Orlando Gonzales Gamarra
    17 / Octubre / 2006

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

    Rodrigo
    23 / Octubre / 2006

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

    Ernesto
    12 / Marzo / 2007

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

    Paluh
    14 / Agosto / 2007

  10. Disculpa ¿como se utiliza el clearfix?

    Jazazu
    16 / Agosto / 2007

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

    Enorabuena

    MiTaGo
    22 / Octubre / 2007

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

    GHN
    16 / Noviembre / 2007

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

    joselito
    16 / Noviembre / 2007

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

    Daniel G. Blázquez
    12 / Diciembre / 2007

  15. mil gracias por esto joeeer me estaba rallando mogollón

    BUFFFFF
    16 / Mayo / 2008

  16. ¡muchas gracias! me ha sido muy útil

    Alca
    21 / Abril / 2009

  17. Este tips me ha sido muy util!!! Gracias

    Developer
    29 / Agosto / 2009

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

    elandy2009
    05 / Septiembre / 2009

  19. Hey en que paró todo esto?

    Heisler
    21 / Junio / 2012

  1. [...] Genial artículo con el que comprenderás por que esas capas voladoras por nuestra página nunca están donde quieres que ...
    aNieto2K - » Flotando en la incertidumbre
  2. [...] Mediante el mtodo tradicional de eliminar pequeos bloques de cdigo a la vez, llegu a descubrir un sospechoso inesperado ...
    EstadoBeta » Archivo » Despejando Floats para IE7
  3. [...] Artículos con tags similares Centrado Vertical con CSS (actualizado)Agregando movimiento vía JavaScriptTransparencias a prueba de browsersLo ví y me ...
    CSSLab » Columnas de igual alto
  4. [...] Artículos con tags similares Transparencias a prueba de browsersCentrado Vertical con CSS (actualizado)¡Aaaaabajo!Flotando en la incertidumbreColumnas de igual altoLo ...
    CSSLab » .clearfix: el widget
  5. [...] Clase CSS “Clearfix”, usada para solucionar contenedores que colapsan cuando su contenido son floats. La clase original la encuentran ...
    Columnas 1 « Taller de produccion web UNIACC
  6. [...] Clase CSS “Clearfix”, usada para solucionar contenedores que colapsan cuando su contenido son floats. La clase original la encuentran ...
    Columnas 1 « Desarrollos para Internet
  7. [...] Artículos con tags similares estilos de botones crossbrowserTexto auxiliar con estiloCentrando Horizontalmente (a prueba de IE)menúes y la class ...
    CSSLab » Layout Híbrido
  8. [...] como comentó acertadamente newdisco, se acerca estrepitosamente una gran actualización de los 2 principales browsers actuales: IE7 y [...]
    Flotando en la incertidumbre at DGWAOO
  9. [...] http://www.csslab.cl/2006/07/20/flotando-en-la-incertidumbre/d [...]
    empdesign » Blog Archive »
  10. [...] CSSLab esta explicado con más detalles como se utiliza esta técnica CSS Clearfix. « [...]
    CSS Clearfix — Freak Group
  11. [...] Flotando en la incertidumbre [...]
    » Pronto… | CSSLab
  12. [...] como comentó acertadamente newdisco, se acerca estrepitosamente una gran actualización de los 2 principales browsers actuales: IE7 y [...]
    DGWAOO » Flotando en la incertidumbre
  13. [...] se usa float alguno, lo que no hace el contenedor colapsar así que nos ahorramos un clearfix. Además que ...
    CSSLab » Esas botoneras: centrándolas
  14. [...] han sido las veces que he nombrado y recontra-aplicado el método de .clearfix aquí en CSSLab. Lo suelo nombrar ...
    CSSLab » clearfix ultimate
  15. [...] probablemente esta es la solución. Pero cuidado, si tienen elementos flotando, quizás algún método de clearfix a la misma ...
    CSSLab » Overflow en IE6
  16. [...] Mediante el método tradicional de eliminar pequeños bloques de código a la vez, llegué a descubrir un sospechoso inesperado ...
    Despejando Floats para IE7
  17. [...] todos es conocido y utilizado Clearfix; luego les comenté sobre Clearfix Ultimate (bautizado por mí) y que me ha ...
    CSSLab - Floatfix: un nuevo clearfix
  18. [...] han sido las veces que he nombrado y recontra-aplicado el método de .clearfix aquí en CSSLab. Lo suelo nombrar ...
    7blog » Clearfix ultimate Diseño y Desarrollo Web
  19. [...] pasado 5 años desde el primer artículo donde describí exhaustivamente la causa y solución má.... Y me asombra que ...
    Displayfix: lo último en clearfix ↝ CSSLab
  20. [...] deben tener es que si están flotando las cajas, su contenedor colapsará. Para esto, .clearfix será la solución [...]
    100% alto, finalmente para todos ↝ CSSLab

OJO: si vas a agregar código fuente, asegúrate de convertirlas antes a entidades HTML, sino el comentario no se renderizará correctamente.

compartido 5 veces