Il Micro Clearfix Hack (lo chiameremo così dal titolo del post originale) è stato reso pubblico per la prima volta da Nicolas Gallagher il 21 aprile 2011. Questa soluzione per il clearing ed il contenimento dei float si basa su un'idea originale di Thierry Koblentz (Yahoo!, nonchè mio amico su CSS Discuss) ed è compatibile anche con Internet Explorer 6 e 7. Vediamolo nei dettagli.
La soluzione è la seguente:
/* For modern browsers */
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
zoom:1;
}
Usando il contenuto generato prima e dopo l'elemento selezionato e impostando la sua proprietà display su table si impedisce il collassamento dello spazio verticale dovuto all'azione dei float.
Quindi viene applicata la proprietà clear dopo il contenuto principale dell'elemento. Notate come il contenuto generato sia a tutti gli effetti una semplice stringa vuota.
Explorer 6 e 7, che non supportano i valori delle tabelle per la proprietà display, necessitano della proprietà zoom (propria di IE) per far funzionare l'hack.
Potete visionare i commenti al post originale per ulteriori dettagli.