Il nuovo metodo per il clear dei float

Qual è il vostro metodo per il clear degli elementi flottanti (stiamo parlando di CSS, non vi preoccupate!)?
Alcuni di voi useranno l'ormai consolidato div vuoto con proprietà clear:all;.
Altri useranno la proprietà overflow:hidden; nell'elemento contenitore.
Altri ancora magari non si sono mai posti il problema :)


Da qualche mese a questa parte è stata elaborata una nuova soluzione a questo annoso problema di noi poveri sviluppatori web, chiamata The New Clearfix Method.

Il clearfix hack, detto anche easy-clearing hack, è un utile metodo per il clearing dei floats. Questo hack funziona molto bene ma si rivolge a browser ormai obsoleti o sulla via del declino. In particolare, IE5 per Mac ormai è storia, e non c'è ragione di tenerne conto nel nostro metodo di clearing.

L'originale clearfix hack è questo:

.clearfix:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
 }
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }

Il nuovo clearfix hack, proposto da Perishable Press, è il seguente:

/* new clearfix */
.clearfix:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
 }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
/* End hide from IE-mac */

Tutte le spiegazioni a questo indirizzo: http://perishablepress.com/press/2009/12/06/new-clearfix-hack/