Floatfix: un nuevo clearfix

1/Dic/2008 211

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. hidroxicloroquina 400mg [#]

    hydroxyquine medication https://plaquenilx.com/# lupus wikipedia english

  2. klipsli dübel [#]

    hello, very nice blog post. I like to read. I hope you write more articles. Thank you.

  3. PatrickFax [#]

    cialis without a doctor prescription https://cialiswithdapoxetine.com/

  4. ivermectin1.com [#]

    ivermectin stromectol Floatfix: un nuevo clearfix | CSSLab | Laboratorio de ideas web http://ivermectin1.com/ ivermectin for humans

  5. ivermectin1.com [#]

    stromectol medicine Floatfix: un nuevo clearfix | CSSLab | Laboratorio de ideas web https://ivermectin1.com/ ivermectin for humans for sale

  6. lytx log in online drivecam [#]

    zyrtec dosage – http://allergyd.com

  7. zyrtec best price [#]

    5 mg zyrtec children – http://allergyd.com

  8. ivermectin australia [#]

    Accustomed Dope Far this by-product
    https://ivermectinst.com can i buy ivermectin online
    https://ivermectstromect.com ivermectin over counter
    https://ivermectstromect.com ivermectin for sale
    https://ivermectinsts.com ivermectin side effects
    https://ivermectstromect.com ivermectin 3 mg

  9. purchasing ivermectin from frontier doctors [#]

    stromectol http://stromectolforte.com/# ivermectin price sztromektol tabletta

  10. stromectolforte.com [#]

    ivermectin dosage http://stromectolforte.com/ preço do stromectol ivermectin predaj

  11. accutane medication [#]

    roaccutane side effects accutane before and after

CSSLab