Yahoo! User Interface Blog (YUIBlog)

  . Clearfix: prima,
 . Clearfix: after {
   contenuto:; "."    
   display: block;    
   height: 0;    
   overflow: hidden;	
 }
 . Clearfix: dopo {clear: both;}
 . Clearfix {zoom: 1;} / * IE <8 * / 

  display: inline-block;
 larghezza: <qualsiasi value> esplicito; 

12 commenti

1. Grazie per la demistificazione di overflow: hidden. Io tendo ad usare overflow: hidden come il mio di default soluzione "clearfix", ma a volte ho dovuto scegliere un altro (o pensavo di avere a) a causa di elementi con posizionamento assoluto fuori dagli schemi. Ora so che è più sottile di quanto pensassi.

   display: table lavora troppo, ma poi non è possibile utilizzare position: relative a tale elemento.

   Commento di Florent V. - 27 Settembre, 2010 #

2. Questo è un buon punto. Sono sicuro che molte persone che stanno usando display: table e display: table-cell non sono a conoscenza di questa limitazione.

   Grazie per il tuo feedback.

   Commento di Thierry Koblentz - 28 Settembre 2010 #

3. Funziona il vostro 'un'alternativa migliore' in IE6, IE7, IE8?

   Commento di Jorge Epuñan - 30 Settembre 2010 #

4. @ Jorge

   Sì lo fa, in realtà funziona in IE 5.0 +

   La logica è che in IE 5,6,7 della larghezza esplicita innesca hasLayout mentre "inline-block" crea un contesto di formattazione a blocchi in IE 8 e altri browsers moderni.

   La larghezza è la chiave per far funzionare le cose su tutta la linea, però, dal momento che, come scatole stile "inline-block" shrink-wrap.

   È per questo che l'articolo dice: "Se è possibile applicare una larghezza dell'elemento contenente carri ..."

   Commento di Thierry Koblentz - 1 ott 2010 #

5. Giocato un po 'con l'utilizzo di display: inline-block e larghezza, ma ho trovato alcuni bug.

   Se vi è uno spazio tra i div si mostra come uno spazio tra i div.
   L'allineamento verticale è un inferno. @ Thierry come si usa?

   Date un'occhiata al mio tentativo qui http://jsfiddle.net/UZr7L/

   Commento di Michael Lajlev - 10 ottobre 2010 #

6. @ Michael

   Io non lo uso su elementi che sono fratelli (almeno non per il layout), ma è da notare che quello che stai vivendo non sono dei bachi.
   YUI 3 offerte griglia con questo utilizzando letter-spacing e word-spacing (valori negativi).

   Commento di Thierry Koblentz - 11 Ottobre 2010 #

7. In seguito a questo commento su Press deperibili , ho notato che avevo un errore di battitura in là quindi ho aggiornato la regola clearfix sopra.
   A differenza di altri metodi, utilizza overflow: hidden, non visibility: hidden.

   Grazie a Darren per sollevare la questione :)

   Commento di Thierry Koblentz - 22 ottobre 2010 #

8. A quanto pare, con content: "020" per il clearfix è ancora meglio

   Commento di unwiredbrain - 28 Ottobre 2010 #

9. Ouch! WordPress masticato il mio codice!

   E 'stato content: " backslash zero zero two zero "

   Commento di unwiredbrain - 28 Ottobre 2010 #

10. @ Unwiredbrain

    Si fa riferimento a una tecnica che utilizza "visibility: hidden", ma quello che sto utilizzando è "overflow: hidden" quindi dovrebbe fare alcuna differenza.

    Grazie per il tuo feedback

    Commento di Thierry Koblentz - 28 ott 2010 #

11. Oh. Devo aver confuso i due. Mi dispiace per questo.

    Commento di unwiredbrain - 28 Ottobre 2010 #

12. Magistrale. Io lo uso su ogni progetto ora come parte del Testo Standard HTML5. Io non uso tutti i boilerplate, ma. Clearfix viene sempre a portata di mano. Grazie!

    Commento di YJ - 10 Maggio 2011 #

Siamo spiacenti, il commento forma è chiusa in questo momento.