domenica 7 novembre 2010

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/

1 commento:

poporoso ha detto...

mi ca che continuo ad usare il clear su un div vuoto alla fine del flusso :p

Posta un commento