frosas.net

Des de sempre he utilitzat el mètode descrit a Position is everything per evitar que els elements flotats se surtin del seu contenidor sense haver d'enmerdar el codi HTML amb un <div style="clear: both"></div> al final del contenidor.

La tècnica es basa en "inventar-se" un element després del contenidor (amb un #contenidor:after). I com que l'IE no soporta el pseudo-element :after s'aprofita la mala interpretació que fa el navegador de la propietat height per aconseguir el mateix efecte (mira't l'enllaç si vols veure els detalls de la tècnica).

Avui a la feina però he pogut comprovar que la tècnica original no funciona amb el nou IE (sembla que la propietat height ja no fa que el contenidor netegi els floats).

De les solucions possibles que he trobat la que m'ha semblat més simple i elegant és la d'aquest comentari a SitePoint: es tracta de aplicar un min-height: 1% al propi contenidor. El codi complet quedaria així:

#contenidor
{
    min-height: 1%;
}

#contenidor:after
{
    clear: both; 
    content: "."; 
    display: block; 
    height: 0; 
    visibility: hidden;
}

/* Ens amaguem de l'IE per Mac \*/
* html #contenidor
{
    height: 1%;
}
/* Deixem d'amagar-nos */

I en el cas que necessitem el min-height per alguna altra cosa podem tirar d'aquesta altra tècnica.