Questo ti farà bene in questi giorni (IE 8 e versioni successive):
.group:after ( content: ""; display: table; clear: both; )Applicalo a qualsiasi elemento genitore in cui devi cancellare i float. Per esempio:
Lo overflow: hidden;sul genitore (non vuoi sempre nascondere l'overflow ).
Adesso un po 'di storia!
Questa era la versione popolare originale, progettata per supportare i browser il più lontano possibile:
.clearfix:after ( visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; ) .clearfix ( display: inline-block; ) /* start commented backslash hack \*/ * html .clearfix ( height: 1%; ) .clearfix ( display: block; ) /* close commented backslash hack */C'era poi una versione un po 'più pulita documentata qui da Jeff Starr, basata sul fatto che nessuno usa IE per Mac, che è ciò su cui si basava l'hack del backslash.
.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 */Poi è diventato popolare usare "gruppo" come nome di classe, che è più carino e più semantico (tramite Dan Cederholm). Inoltre, la contentproprietà non ha nemmeno bisogno dello spazio, può essere una stringa vuota (tramite Nicolas Gallagher). Quindi, senza alcun testo, font-sizenon è necessario (Chris Coyier).
.group:after ( visibility: hidden; display: block; content: ""; clear: both; height: 0; ) * html .group ( zoom: 1; ) /* IE6 */ *:first-child+html .group ( zoom: 1; ) /* IE7 */Ovviamente, se elimini il supporto per IE 6 o 7, rimuovi le linee associate.
Aggiornamento 18 maggio 2011: Nicolas Gallagher di nuovo con il “micro” clearfix. Vedi anche queste cose aggiuntive..group:before, .group:after ( content: ""; display: table; ) .group:after ( clear: both; ) .group ( zoom: 1; /* For IE 6/7 (trigger hasLayout) */ )Vedere la parte superiore di questa pagina per la versione più moderna di clearfix.
In futuro, potremmo essere in grado di fare:
.group ( display: flow-root; )