ClearFix vs Overflow

Question

E 'il problema di float standard. Hai un sacco di elementi fluttuanti all'interno di un div contenitore genitore. Poiché i child sono mobili, il genitore non si espande per includerli tutti.

Conosco la soluzione di clearfix e imposta la proprietà di overflow sul div del contenitore padre su "auto" o "nascosto". http://www.quirksmode.org/css/clearing.html Per me impostare il metodo di overflow sembra molto più bello della sua unica proprietà. Quello che voglio capire è quando l'approccio alla clearfix ha un vantaggio rispetto a questo metodo perché vedo che viene usato molto spesso.

P.S. Non sono preoccupato per IE6.

Answer 1

L'unica volta che dovresti preoccuparti di utilizzare il metodo "clearfix" che inserisce il contenuto invisibile da cancellare è se hai bisogno di un elemento per essere visibile quando trabocca l'elemento a cui lo stai applicando, altrimenti l'innesco hasLayout + l'overflow è d'oro .

Si noti che in IE7 i trigger nascosti di overflow hannoLayout. Non sono sicuro di IE8.

#wrapper { width:80em; overflow:hidden; } 

Il metodo di cui sopra funziona bene nella maggior parte dei casi a meno che non hai bisogno di dire, #header traboccare #wrapper passato ..

#wrapper { width:80em; position:relative; } 
#wrapper:after { content:"."; clear:both; display:block; height:0; visibility:hidden; } 
#header { position:absolute; top:-15px; left:-15px; }