Der Clearfix: Erzwingen Sie, dass ein Element seine untergeordneten Elemente selbst löscht CSS-Tricks

Dies wird Ihnen heutzutage gut tun (IE 8 und höher):

.group:after ( content: ""; display: table; clear: both; )

Wenden Sie es auf jedes übergeordnete Element an, in dem Sie die Floats löschen müssen. Zum Beispiel:

Sie würden dies verwenden, anstatt den Float mit etwas wie
am unteren Rand des übergeordneten Elements zu löschen (leicht zu vergessen, nicht direkt in CSS handhabbar, nicht semantisch) oder etwas wie overflow: hidden;mit dem übergeordneten Element zu verwenden (Sie möchten den Überlauf nicht immer verbergen ).

Nun zu ein bisschen Geschichte!

Dies war die ursprüngliche, beliebte Version, die entwickelt wurde, um Browser so weit wie möglich zu unterstützen:

.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 */

Es gab dann eine etwas sauberere Version, die hier von Jeff Starr dokumentiert wurde, basierend auf der Tatsache, dass niemand IE für Mac verwendet, worum es beim Backslash-Hack ging.

.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 */

Dann wurde es populär, "Gruppe" als Klassennamen zu verwenden, der schöner und semantischer ist (über Dan Cederholm). Außerdem benötigt die contentImmobilie nicht einmal den Platz, es kann sich um eine leere Zeichenfolge handeln (über Nicolas Gallagher). Dann wird ohne Text font-sizenicht benötigt (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 */

Wenn Sie die IE 6- oder 7-Unterstützung einstellen, entfernen Sie natürlich die zugehörigen Zeilen.

Update 18. Mai 2011: Nicolas Gallagher erneut mit dem Clearfix „Micro“. Siehe auch dieses zusätzliche Zeug.

.group:before, .group:after ( content: ""; display: table; ) .group:after ( clear: both; ) .group ( zoom: 1; /* For IE 6/7 (trigger hasLayout) */ )

Die modernste Version des Clearfix finden Sie oben auf dieser Seite.

In Zukunft könnten wir möglicherweise Folgendes tun:

.group ( display: flow-root; )