Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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

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.

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 6 Kommentare

  1. Klaus Bader
    schrieb am 19.02.2020 um 12:50 Uhr:

    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?

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 19.02.2020 um 19:50 Uhr:

      Nur wenn du möchtest, dass mehrere gefloatete Elemente auf einander reagieren. Das ist selten der Fall.

      Antworten
  2. julia angerhausen
    schrieb am 19.11.2018 um 20:25 Uhr:

    „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

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 19.11.2018 um 21:40 Uhr:

      Hallo Julia, vielleicht hilft dir folgender Artikel weiter?

      Antworten
  3. D. Schnittke
    schrieb am 09.11.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.

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 09.11.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.

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

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 →