Clearfix für gefloatete CSS-Layouts
In diesem Beitrag findet ihr den Code und eine Erklärung der Clearfix-CSS-Klasse.

Mit CSS gefloatete Elemente werden aus dem Standard-Dokumentfluss eines HTML-Dokuments entfernt. Andere Elemente verhalten sich daher so, als wären die gefloateten Elemente nicht vorhanden und rutschen im Layout häufig an eine unerwünschte Stelle. Um Floats aufzuheben und somit das oben beschriebene Problem zu lösen, wird i.d.R. ein sog. Clearfix eingesetzt.
Schulungen von kulturbanause
Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen
Floats aufheben mit der clear-Eigenschaft
Um Floats aufzuheben existiert die clear
-Eigenschaft von CSS. Mit clear:left;
werden vorherige float:left;
-Befehle aufgehoben, mit clear:right;
vorherige float:right;
-Angaben. Wenn alle Floats aufgehoben werden sollen, schreibt man clear:both;
.

CSS-Clearfix
Um eine clear
-Eigenschaft anwenden zu können, muss ein nachfolgendes Element vorhanden sein, das vorherige Floats aufhebt. Das ist in der Praxis allerdings häufig nicht der Fall, beispielsweise wenn in einem Container-Element alle Elemente gefloatet werden.
Container-Elemente, die selbst nicht gefloatet sind, aber gefloatete Elemente enthalten, verhalten sich so als hätten sie keinen Inhalt. Sie fallen daher auf eine Höhe von Null zusammen.

Hier kommt nun der sog. Clearfix ins Spiel. Der Clearfix ist eine CSS-Klasse, die nach dem Element dem sie zugewiesen wurde den Float wieder aufhebt. Im oben gezeigten Beispiel wird der Clearfix daher dem Container-Element zugewiesen.
.clearfix::before,
.clearfix::after {
content: " ";
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1; /* Für den IE6 und IE7 */
}
Sass Clearfix
Wenn ihr mit Sass arbeitet, ist vielleicht der Sass-Clearfix für euch interessant.
Feedback & Ergänzungen – 6 Kommentare
Kommentar zu dieser Seite
Website-Projekte mit kulturbanause
Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.
Übersicht Kompetenzen →Schulungen von kulturbanause
Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.
Übersicht Schulungsthemen →
Jonas, kommt es eigentlich zu irgendwelchen Problemen mit anderen Elementen, wenn auf alle Container, die gefloatete Inhalte enthalten könnten, von Haus aus die Klasse ‚clearfix‘ drauflegt?
Nur wenn du möchtest, dass mehrere gefloatete Elemente auf einander reagieren. Das ist selten der Fall.
„https://blog.kulturbanause.de/2013/03/clearfix-fuer-gefloatete-css-layouts/“
Ich find das Beispiel sehr gut, was mir fehlt is eine Erklärung/ Beschreibung zu „:before“, was es damit auf sich hat, Danke
mit besten Grüssen
Julia Angerhausen
Hallo Julia, vielleicht hilft dir folgender Artikel weiter?
Es geht auch, indem man hinter alle floatenden Elemente, vor dem Ende des umschließenden Containers, ein br einfügt, dem man (möglichst über eine im head oder in der css-Datei errichtete Klasse) den Style clear:both zuweist.
Das führt zwar zum gewünschten Ergebnis, wäre aber sehr schlecht umgesetzt, da überflüssiges HTML-Markup zu Stylingzwecken benötigt wird.