Floatfix: un nuevo clearfix

1/Dic/2008 78

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. Snzhuw [#]

    Zeqpdx – generic cialis 20mg price Qbkcen okzwze

  2. Jasonrag [#]

    https://zithromaxst.com/# zithromax 500

  3. Rhywoq [#]

    Dmfdny – price of 50 mg viagra Ebutqz tewehz

  4. Sjjdtz [#]

    Gvnxxk – generic viagra 50mg Qjrhxq pzuydo

  5. Scottsnuro [#]

    http://zithromaxproff.com/# zithromax capsules price
    zithromax tablets

  6. Mhsswc [#]

    Teotji – college essay citation Ortomj mcpxcv

  7. Kdldzs [#]

    Bnvqlw – creative thinking problem solving Cjwcdq rvftom

  8. Scottsnuro [#]

    https://zithromaxproff.com/# zithromax 250 mg australia
    where can you buy zithromax

  9. Williamtaw [#]

    free dating sites
    dating personals

  10. Ipyjyz [#]

    stromectol ivermectin tablets – purchase ivermectin ivermectin 3 mg tabs

  11. Tituqp [#]

    buy ivermectin cream – stromectol generic buy stromectol

  12. Utbecg [#]

    stromectol ivermectin buy – buy liquid ivermectin ivermectin for humans

  13. Javierexesk [#]

    browse tinder for free , tinder login
    tindr

  14. Cdjgeh [#]

    purchase stromectol – purchase stromectol online generic name for ivermectin

  15. Mlwasw [#]

    ivermectin price usa – cheap stromectol ivermectin 6 mg

  16. AnthonyGlymn [#]

    canadian viagra viagra generic – generic viagra available
    viagra dosage

  17. Ucklec [#]

    ivermectin 1 – ivermectin 8 mg ivermectin 3mg pill

  18. AnthonyGlymn [#]

    viagra samples viagra prices – viagra samples
    viagra without a doctor prescription

  19. Ghuwcy [#]

    stromectol ivermectin tablets – ivermectin ebay stromectol 3 mg tablet

  20. AnthonyGlymn [#]

    п»їover the counter viagra online viagra – generic viagra available
    viagra 100mg

  21. Dvrwnl [#]

    clopidogrel plavix – plavix coupon clopidogrel cost uk

  22. Javierexesk [#]

    tinder online , how to use tinder
    http://tinderentrar.com/

  23. AnthonyGlymn [#]

    natural viagra generic viagra – generic viagra available
    real viagra without a doctor prescription

  24. BradleyTonuh [#]

    buy cialis online overnight cialis in europe – cialis without prescriptions canada
    buy cialis online europe

  25. Elrcij [#]

    plavix brand name coupon – purchase plavix clopidogrel 75 mg tablets price in india

  26. BradleyTonuh [#]

    ordering cialis online australia safe buy cialis – cialis original for sale
    cheapest generic cialis australia

  27. Jntxvw [#]

    online pharmacy for ed pills – is there blood pressure meds to help erectile dysfunction reddit best ed pills

  28. BradleyTonuh [#]

    fastest delivery of generic cialis buy cialis cheaper online – cialis online daily
    can i buy cialis in uk

Deja tu Comentario

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

CSSLab