Das Clearfix: Ein Element dazu zwingen, seine Kinder selbst zu leeren

Das wird heutzutage ausreichen (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 bereinigen müssen. Zum Beispiel:

<div class="group">
  <div class="is-floated"></div>
  <div class="is-floated"></div>
  <div class="is-floated"></div>
</div>

Sie würden dies anstelle des Bereinigens des Floats mit etwas wie <br style="clear: both;" /> am Ende des Elternteils (leicht zu vergessen, nicht direkt in CSS handhabbar, nicht semantisch) oder mit etwas wie overflow: hidden; am Elternteil verwenden (Sie möchten den Überlauf nicht immer verstecken).

Nun zu ein wenig Geschichte!

Dies war die ursprüngliche populäre Version, entwickelt, 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 */

Dann gab es eine etwas sauberere Version, hier dokumentiert von Jeff Starr, basierend auf der Tatsache, dass niemand IE für Mac benutzt, worum es bei dem 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, "group" als Klassennamen zu verwenden, was schöner und semantischer ist (via Dan Cederholm). Auch die content-Eigenschaft benötigt nicht einmal den Leerzeichen, sie kann ein leerer String sein (via Nicolas Gallagher). Dann, ohne Text, wird font-size nicht 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 natürlich die Unterstützung für IE 6 oder 7 fallen lassen, entfernen Sie die entsprechenden Zeilen.

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

Sehen Sie oben auf dieser Seite die modernste Version des Clearfix.

In Zukunft könnten wir das tun

.group {
  display: flow-root;
}