Flotando en la incertidumbre
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.
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 {<br />
content: "."; <br />
display: block; <br />
height: 0; <br />
clear: both; <br />
visibility: hidden;<br />
}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 \*/<br />
* html .clearfix {height: 1%;}<br />
/* 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 {<br />
content: "."; <br />
display: block; <br />
height: 0; <br />
clear: both; <br />
visibility: hidden;<br />
}<br />
.clearfix {display: inline-table;}<br />
/* Hides from IE-mac \*/<br />
* html .clearfix {height: 1%;}<br />
.clearfix {display: block;}<br />
/* 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.
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 {<br />
content:"."; <br />
display:block; <br />
height:0; <br />
clear:both; <br />
visibility:hidden;<br />
}
.clearfix {<br />
display:inline-block;<br />
}<br />
.clearfix {<br />
display:block;<br />
}<br />
* html .clearfix {<br />
height:1px;<br />
}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><br />
/* style for IE 6 + IE5.5 + IE5.0 */<br />
.gainlayout { height: 0; }<br />
</style><![endif]--><br />
<!--[if IE 7]><style><br />
.gainlayout { zoom: 1;}<br />
</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…