float vs clear: wie die beiden Eigenschaften zusammenspielen

Was float tut

Ein gefloatetes Element rückt an den Rand seines Containers, und die Zeilenboxen der folgenden Elemente weichen ihm aus – der Text fließt daran vorbei. Die Block-Boxen selbst tun das nicht; sie rutschen hinter dem Float hoch. Der Fluss-Visualizer zeigt den Unterschied zwischen Zeilenbox und Block-Box.

Was clear tut

clear: left, right oder both auf einem Element schiebt dessen obere Rahmenkante unter die Unterkante aller vorangehenden Floats auf der genannten Seite. Es wirkt auf das Element, das es trägt, nicht auf den Float.

Zusammenfallende Container und der Clearfix

Ein Container, der nur Floats enthält, hat die Höhe null, weil Floats nicht zu seiner Höhe zählen. Der klassische Clearfix fügt ein Pseudoelement mit clear: both ans Ende: .container::after { content: ""; display: block; clear: both; }. Seit 2021 gibt es display: flow-root, das den Container ohne Zusatz einen neuen Formatierungskontext bilden lässt und die Floats einschließt.

Clearance ist kein Abstand

Was clear erzeugt, heißt in der Spezifikation Clearance und ist ausdrücklich kein Außenabstand. Der Unterschied wird sichtbar, sobald Abstände zusammenfallen: Clearance verhindert das Zusammenfallen mit dem darüberliegenden Abstand, ein zusätzlicher margin-top hätte es nicht getan. Zweite Einschränkung: clear wirkt nur auf Boxen im normalen Fluss. Auf einem absolut positionierten Element oder auf einer Zeilenbox bleibt es wirkungslos – Zeilenboxen weichen dem Float ohnehin von selbst aus.

Der umflossene Text in Zeilenboxen

Ein umflossenes Element wird nicht dadurch umflossen, dass die Boxen daneben schmaler würden. Die Blockbox eines Absatzes liegt weiterhin über die volle Breite und beginnt an derselben Stelle wie ohne den Float – verkürzt werden nur die Zeilenboxen darin. Das ist der Grund für ein Verhalten, das oft für einen Fehler gehalten wird: Ein Hintergrund oder ein Rahmen am Absatz läuft unter dem umflossenen Bild hindurch, obwohl der Text daneben steht.

Wer den Hintergrund am Bild vorbeiführen will, muss den Absatz zu einem eigenen Formatierungskontext machen – in CSS 2.1 etwa mit overflow: hidden, heute mit dem ausdrücklichen Wert dafür. Dann verkürzt sich nicht mehr die Zeile, sondern die ganze Box, und Rahmen und Hintergrund folgen. Dasselbe erklärt, warum ein umflossenes Element aus einem kurzen Container unten herausragt: Es ist aus dem Fluss genommen, und der Container misst nur, was im Fluss geblieben ist.

Was aus dem Float-Layout geworden ist

Über Jahre war der Float das einzige Mittel, zwei Bereiche nebeneinanderzustellen. Ganze Raster-Baukästen bestanden aus Klassen mit Prozentbreiten und einem Float, dazu einer Vorkehrung am Ende jeder Reihe, damit die nächste nicht hochrutschte. Das funktionierte, war aber eine Zweckentfremdung: Die Eigenschaft ist im Kapitel über visuelle Formatierung als Mittel für umflossene Inhalte beschrieben, nicht als Layoutmodell.

Diese Rolle haben Flexbox und Grid übernommen, und dort gibt es die zugehörigen Probleme nicht mehr: keine zusammenfallenden Container, keine Vorkehrung am Reihenende, keine Abhängigkeit von der Reihenfolge im Quelltext. Geblieben ist die ursprüngliche Aufgabe, und für die ist der Float weiterhin das richtige Werkzeug: ein Bild, um das der Text herumläuft, ein Anfangsbuchstabe, eine Randnotiz. Eine spätere Eigenschaft lässt den Text sogar der Silhouette einer Grafik folgen statt ihrem Kasten – ein Hinweis darauf, dass der Float nicht überholt, sondern nur auf seinen Zweck zurückgeführt ist.

Wie weit ein Float überhaupt wandert

Ein umflossenes Element wird so weit nach oben und nach außen geschoben, wie es die Regeln erlauben – und die sind in CSS 2.1 in neun Punkten ausbuchstabiert. Zwei davon erklären das meiste: Ein Float darf nie höher stehen als die Oberkante der Zeile, in der er im Quelltext steht, und nie höher als ein vorheriger Float derselben Seite. Deshalb ändert sich die Lage eines Bildes im Fließtext, wenn man es einen Absatz weiter nach unten verschiebt, und deshalb reihen sich mehrere Floats hintereinander auf.

Passt ein Float neben einen vorherigen nicht mehr in die Zeile, rutscht er darunter – und zwar unter den untersten, nicht nur unter den letzten. Ein Umbruch entsteht damit von selbst, sobald der Platz ausgeht, und das war lange die einzige Art, eine umbrechende Reihe ohne Skript zu bauen. Verlassen konnte man sich darauf nur bei gleich hohen Elementen: Sind sie unterschiedlich hoch, hakt die nächste Reihe an der höchsten Kante ein, und es entstehen die Lücken, die jeder aus alten Bildergalerien kennt.

Wann welches – und wann keins von beiden

• Bild vom Text umfließen lassen: float, dann clear oder flow-root am Container.
• Spalten, Leisten, Raster: weder noch – Flexbox oder Grid.
• Ein Element unter einen Float zwingen: clear auf diesem Element.

Häufige Fragen