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][1]; luego les comenté sobre [Clearfix Ultimate][2] (bautizado por mí) y que me ha sido de gran utilidad desde entonces. Esta vez, les traigo uno nuevo: Floatfix (nuevamente bautizado así por mí). Con este método, superas el colapso del contenedor a causa de elementos bloque flotantes dentro de él utilizando la propiedad CSS… ¡float!

¿Float para arreglar otros floats?

Así es, si tu elemento caja que contiene otros elementos que están flotando colapsa, pues simplemente flótalo y todo volverá a la normalidad.

Volveré a explicar el asunto. Miren en el siguiente ejemplo como #container contiene (valga la redundancia) a 2 elementos que están flotando. Bueno, basta con que sea 1 y ya #container estaría colapsando (no los envuelve).

[Ver ejemplo 1][3]{.verejemplo}

SafariFirefoxOperaInternet Explorer 6Internet Explorer 7 
#container {<br />
     margin: 40px;<br />
}<br />
.flout {<br />
     float: left;<br />
}

Bueno, si utilizan .clearfix todo volvería a la normalidad; si tienen ancho fijo en el #container y agregan overflow: hidden también todo estaría normal, pero en vez de eso, sólo floten el #container a cualquier lado: left o right:

[Ver ejemplo 2][4]{.verejemplo}

#container {<br />
     margin: 40px;<br />
     float: left;
}<br />
.flout {<br />
     float: left;<br />
}

Así de simple y de contradictorio. Funciona en todos mis browsers de pruebas y claro tiene sus pros y contras. Pero depende de cada uno manejar la mejor solución a sus problemas. Este es sólo uno más.

[1]: http://www.csslab.cl/2006/07/20/flotando-en-la-incertidumbre/ “Enlace en CSSLab a “Flotando en la incertidumbre”” [2]: http://www.csslab.cl/2008/06/09/clearfix-ultimate/ “Enlace en CSSLab a “Clearfix Ultimate”” [3]: http://www.csslab.cl/ejemplos/floatfix/float1.html “CSSLab.cl: ejemplo 1 de “Floatfix”” [4]: http://www.csslab.cl/ejemplos/floatfix/float2.html “CSSLab.cl: ejemplo final de “Floatfix””