Flotando en la incertidumbre

20/Jul/2006 233

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:

Comentarios

  1. ivermectin1.com [#]

    pangkaraniwang stromectol Flotando en la incertidumbre | CSSLab | Laboratorio de ideas web http://ivermectin1.com/ generic ivermectin

  2. latin male gay dating [#]

    gay dating terms https://gayedating.com/

  3. monogamous gay dating [#]

    gay dating profile pictures https://gaydatingcanada.com/

  4. hydroxychloroquineMt [#]

    chloroquine dosage plaquenil pregnancy hydroxycloriquin

  5. that quest bars [#]

    This is a topic that is near to my heart… Take care!

    Exactly where are your contact details though?
    quest bars http://j.mp/3C2tkMR quest bars

  6. HenryUnfiP [#]

    free gay dating sites
    free gay dating site in canada
    gay dating asian guys daddy

  7. hydroxychloroquine dose [#]

    Greetings from Ohio! I’m bored at work so I decided to check out
    your site on my iphone during lunch break. I enjoy the
    info you provide here and can’t wait to take a look when I get
    home. I’m amazed at how fast your blog loaded on my phone ..
    I’m not even using WIFI, just 3G .. Anyways, excellent site! https://hhydroxychloroquine.com/

  8. app.gumroad.com [#]

    You need to take part in a contest for one of the highest quality websites on the
    internet. I most certainly will highly recommend this web site!
    asmr https://app.gumroad.com/asmr2021/p/best-asmr-online asmr

  9. gay dating games like hunipop [#]

    gay christian dating service https://gaydatinglosangeles.com/

  10. http://j.mp [#]

    hello there and thank you for your info – I’ve certainly picked up anything new from
    right here. I did however expertise several technical issues using
    this website, since I experienced to reload the web site a lot of times previous to I could get
    it to load properly. I had been wondering if your web host is OK?
    Not that I am complaining, but slow loading instances times will very frequently affect your placement in google
    and can damage your quality score if advertising and marketing with Adwords.
    Well I am adding this RSS to my email and could look out for much more of your respective exciting content.
    Ensure that you update this again soon. scoliosis surgery https://0401mm.tumblr.com/ scoliosis surgery

  11. that quest bars [#]

    Hi there, yup this paragraph is actually fastidious and I have learned lot of things from it regarding blogging.
    thanks. quest bars http://j.mp/3C2tkMR quest bars

  12. gay pride event dating [#]

    free black gay dating site https://dating-gaym.com/

  13. bitly.com [#]

    Truly no matter if someone doesn’t know afterward its up to other users that they will help, so here it happens.
    scoliosis surgery https://0401mm.tumblr.com/ scoliosis surgery

  14. michael montgomery gay dating [#]

    no email gay dating site https://gay-singles-dating.com/

  15. MarvinFuh [#]

    viagra online generic
    canadian generic viagra 5 mg cialis canada northwest canadian pharcharmy online canadian discount pharmacies cialis canada viagra without a doctor prescription usa canadian pharmacy and cialis canadian pharmacy – cialis buy viagra online canadian viagra online pharmacy reviews
    canadian pharmacy and viagra viagra price lowest price on cialis viagra uk viagra free

  16. hydroxychloroquineMt [#]

    chloroquine tablets what are the side effects of hydroxychloroquine hco medical abbreviation

  17. www.iherb.com [#]

    No matter if some one searches for his necessary thing, thus he/she
    wants to be available that in detail, so that thing is maintained over here.
    quest bars https://www.iherb.com/search?kw=quest%20bars quest bars

  18. coub.com [#]

    Hi, I do think this is an excellent blog. I stumbledupon it
    😉 I will revisit once again since i have book marked it.
    Money and freedom is the greatest way to change, may you be rich and continue to help other people.

    scoliosis surgery https://coub.com/stories/962966-scoliosis-surgery scoliosis surgery

  19. bitly.com [#]

    I have read so many articles concerning the blogger lovers except this post is really a pleasant piece of writing, keep it up.
    ps4 games https://bitly.com/3z5HwTp ps4

  20. bit.ly [#]

    Wow, that’s what I was searching for, what a material! present here at
    this blog, thanks admin of this website. cheap flights http://1704milesapart.tumblr.com/ cheap flights

  21. http://bitly.com/3C42OCu [#]

    Hello, everything is going perfectly here and ofcourse every one is sharing data, that’s actually excellent, keep up writing.
    cheap flights http://1704milesapart.tumblr.com/ cheap flights

  22. cialis 20 mg best price [#]

    I really like your blog.. very nice colors & theme.
    Did you make this website yourself or did you hire someone to do it for
    you? Plz answer back as I’m looking to create my own blog and would like to find out where u got this from.

    many thanks https://tadalafili.com/

  23. prednisolona [#]

    prednisone side effects in men buy prednisolone tablets

  24. what is accutane [#]

    buy isotretinoine how does accutane work

  25. modafinilotc [#]

    buy modafinil reddit modafinil prescription online

  26. drineeifty [#]

    https://bactrimtrimethoprim.com/ bactrim dosage

  27. cetirizine brand [#]

    cetirizine hydrochloride 10mg walmart – http://allergyd.com

  28. zyrtec coupons [#]

    zyrtec samples for healthcare professionals – https://allergyd.com

  29. stromectolforte.com [#]

    why does diabetes cause impotence http://stromectolforte.com – ivermectin by mail

  30. stromectol cost [#]

    stromectol uk https://stromectolforte.com/# ivermectin for humans for sale stromectol 6 mg

  31. Joeblabs [#]

    how much is daily cialis

  32. Jackblabs [#]

    how to purchase cialis online

  33. isotretinoine [#]

    buy accutane accutane before and after

CSSLab