Floatfix: un nuevo clearfix

1/dic/2008 9

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 Clearfix Ultimate (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

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

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

#container {
margin: 40px;
float: left; }
.flout {
float: left;
}

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.

Link:

Comentarios

  1. Almorca [#]

    Este método es genial por lo sencillo que es.

    Además también funciona con Konqueror 3.5.8

  2. anaya [#]

    El unico incoveniente que le veo es que el elemento tambien estara flotando y eso probocara que no respete el ancho de 100% del contenedor de este contenedor jaja (que chistoso sono eso), ¿ Con ancho 100% o tendremos que usar pixeles?.. Sabes como tambien se arregla eso? , facil con overflow:auto aplicado al contenedor y a los flotantes , funciona en todos los browsers 😛 y respeta el 100% del wrapper (o como le llamen).

  3. fearlex [#]

    Muy bueno pero aun asi, sigo usando Clearfix, lo conozco al 100% y hasta ahora es el que mejor resultado me ha dado. Aunque siempre es bueno conocer mas opciones. Gracias una vez mas.

  4. Queli Coto [#]

    mucho más fácil que eso. al contenedor le damos un overflow: auto, esto funcionara en todos los navegadores excepto el ie6, donde para que se comporte igual, le debemos de poner un height: 1%
    De esta forma no tenemos el inconveniente de tener el contenedor flotado que a la larga nos daría problemas.

    saludos

  5. Nacho Sánchez [#]

    Muy buenas.

    Un aporte excelente. Esa técnica ya la llevo usando desde hace bastante tiempo y tiene sus ventajas e inconvenientes.

    Ventajas: que lo entiendes a la primera por la simplicidad que tiene, poco peso, crossbrowser (por su simplicidad),…

    Inconvenientes: El problema se va subiendo a los padres (de los div más internos hasta el wrapper general) y acabas teniendo flotados todos los componentes, y en portales grandes puede acabar siendo un problema.

    Aunque yo sigo usando las dos técnicas, creo que hay que ver qué técnica utilizar en qué momento.

    Saludos

  6. Invidia [#]

    Buenas, no es una técnica nueva, se usa bastante pero si empiezas a usarla a menudo acuerdate del display:inline; para el bug de ie6 de la duplicación de margenes. Empezarás a verlo por todas partes.

    Personalmente no me gusta esta técnica, porque acabas teniendo todo flotando y teniendo muchos problemas con las alturas.

    Un saludo.

  7. Jorge Epuñan [#]

    Gracias a todos por sus palabras, solo para aclarar: esta tecnica viene del 2004; para mí es nueva ya q no la conocía pero seguramente más de alguno ya la utiliza. Personalmente no me gustó mucho ya q como bien dicen tiendes a flotar todo y debes cuidar el doble-margin de IE6. Pero es una técnica más y hay q conocerlas tods para decidir por cuál tener siempre bajo la manga.

    Saludos a todos.

  8. jose roberto (vevni) [#]

    jejej que onda jorge, ya deja de intimidarnos con las tecnicas de clearfix, jajaja, usen la que gusten, y no se llenen de dividitis y clasisitis… saludos desde cancun!!!

  9. melqui [#]

    no e visto bien de quien es este zito pero es el mejor que e visitado y ademas contiene justamente lo que estaba buscando de verdad gracias por hacer este trabajo es para mi emprecionante

Deja tu Comentario

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

CSSLab