The good ol’ clearfix
07-04-2008 
Roberto 
Es un truco viejo pero que hasta hace poco no empecé a aplicar en mis proeyctos. Se trata de un fix para ahorrarse el <div style=”clear:both” />
La típica situación donde tenemos que usar un clear es cuando queremos posicionar un elemento debajo de uno o varios elementos posicionados con float. En la situación normal pondríamos el clear como siguiente elemento en el html, en plan.
<div style=”float:left”>Contenido alineado a la izq</div>
<div style=”float:left” >Contenido alineado a la izq</div>
<div style=”float:left”>Contenido alineado a la izq</div>
<div style=”clear:both”></div>
<p>Contenido que va debajo del grupo de divs anteriores</p>
Contenido que va debajo del grupo de divs anteriores
Con el clearfix, en cambio, tenemos que añadirle la clase .clearfix al último div de nuestro grupo posicionado en float.
<div style=”float:left”>Contenido alineado a la izq</div>
<div style=”float:left” >Contenido alineado a la izq</div>
<div style=”float:left” class=”clearfix” >Contenido alineado a la izq</div>
<p>Contenido que va debajo del grupo de divs anteriores</p>
Y esta es la clase en particular que nos ayuda a conseguir este efecto.
.clearfix:after
{
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */
Resumiendo su funcionamiento: esta clase genera un elemento block sin visibilidad justo después del clearfix y a éste elemento le coloca el clear:both por nosotros.
Ya, pero ¿y si mi navegador del pasado no acepta el selector :after?
Suponiendo que estés hablando del ie6, tiene un corportamiento ajeno a las especificaciones en lo referente al modelo de caja y el flujo de float. Si un elemento contenedor tiene un height definido pero su contenido es mayor, el contenedor se ajusta a su contenido (y de paso revienta el flujo de float). Así el height:1% se asegura que en ie6 tengamos el mismo comportamiento.
Bueno, lo teneis explicado como toca en positioniseverything y por cierto, ya nadie usa ie Mac, así que podeis quitar el hack, que siempre queda feo.
