kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Clearfix für gefloatete CSS-Layouts

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

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;.

Beispiel anzeigen

Floats aufheben mit der clear-Eigenschaft
Das Layout mit gefloateten Inhalten ohne CSS-clear (links) und mit der clear-Eigenschaft auf dem Footer (rechts.)

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.

Zusammengefallener Container (links) und mit Einsatz des Clearfix (rechts)
Zusammengefallener Container (links) und mit Einsatz des Clearfix (rechts)

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

Beispiel anzeigen

Sass Clearfix

Wenn ihr mit Sass arbeitet, ist vielleicht der Sass-Clearfix für euch interessant.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

2 Kommentare

  1. D. Schnittke

    Verfasst am 9. November 2015 um 12:24 Uhr.

    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.

    • Jonas Hellwig

      Verfasst am 9. November 2015 um 12:39 Uhr.

      Das führt zwar zum gewünschten Ergebnis, wäre aber sehr schlecht umgesetzt, da überflüssiges HTML-Markup zu Stylingzwecken benötigt wird.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.