Was float macht
float schiebt ein Element an eine Seite seines Containers und lässt den folgenden Text darum herumfließen:
Das Margin an der gefloateten Box verhindert, dass der Text sie berührt. Über Margins steuerst du diesen Abstand; dem Text selbst kannst du kein Margin zum Float hin geben.
Die Werte
| Wert | Ergebnis |
|---|---|
none (Standard) | Kein Float |
left | An den linken Rand geschoben |
right | An den rechten Rand geschoben |
inline-start | An den Zeilenanfang geschoben: links im Deutschen, rechts im Arabischen oder Hebräischen |
inline-end | An das Zeilenende geschoben |
inline-start und inline-end folgen der Schreibrichtung, sodass ein damit gebautes Layout auf Seiten von rechts nach links korrekt gespiegelt wird. Ein gefloatetes Element wird außerdem zum Block: display: inline wird zu block, also gelten width und height sogar an einem span oder img.
Bilder im Text floaten
Der klassische Einsatz: ein Bild in einem Artikel, um das Text fließt. Float je eins an jede Seite:
clear: das Umfließen beenden
clear sagt „fang unter jedem früheren Float auf dieser Seite an“. Setz es an das Element, das nicht neben einem Float stehen soll, etwa die Überschrift des nächsten Abschnitts:
Die erste Überschrift quetscht sich neben den Float. Die zweite beginnt darunter. clear akzeptiert left, right, both, inline-start, inline-end und none.
Das zusammenfallende Elternelement und flow-root
Floats liegen außerhalb des normalen Flusses, also hat ein Container, dessen Kinder alle gefloatet sind, nichts im Fluss und fällt auf die Höhe null zusammen. Sein Hintergrund und sein Rahmen landen als dünne Linie über den Floats:
display: flow-root erzeugt einen neuen Block Formatting Context, der seine Floats immer einschließt. Älterer Code nutzt für dasselbe Ergebnis einen „Clearfix“:
.clearfix::after {
content: "";
display: block;
clear: both;
}
Auch overflow: hidden oder auto schließt Floats ein, mit der Nebenwirkung, dass abgeschnitten wird; siehe overflow.
Floats sind nicht für das Layout gedacht
Vor Flexbox und Grid wurden ganze Seitenlayouts aus gefloateten Spalten gebaut, mit Clearfixes und Breitenrechnungen überall. Diese Zeit ist vorbei: Floats können nicht zentrieren, keine gleich hohen Spalten erzeugen und gehen kaputt, wenn sich die Größe des Inhalts ändert. Nimm display: flex oder display: grid für Zeilen und Spalten und behalte float, um Text um etwas herumfließen zu lassen. Um ein Bild zu zentrieren, statt Text darum fließen zu lassen, siehe Bild zentrieren.
Um eine Form herumfließen
Mit shape-outside folgt Text einer Form statt dem Rechteck des Floats. Das funktioniert nur an gefloateten Elementen:
.avatar {
float: left;
width: 120px; height: 120px;
border-radius: 50%;
shape-outside: circle(50%);
margin-inline-end: 16px;
}
Häufige Fehler
- Ein Elternelement mit Höhe null. Seine Kinder sind alle gefloatet. Füge
display: flow-roothinzu. - Floats für Spalten oder Navigation. Nimm Flexbox oder Grid.
float: centererwarten. Das gibt es nicht. Zentriere mit Flexbox, Grid odermargin: 0 auto.- Inhalt nach einem Float fließt herum, obwohl er das nicht soll. Gib ihm
clear: bothoder pack den Float und seinen Text in einenflow-root-Container. - Physisches
leftundrightauf einer mehrsprachigen Website. Nimminline-startundinline-end, damit das Layout in Sprachen von rechts nach links gespiegelt wird.
Häufig gestellte Fragen
Was macht float in CSS?
Es nimmt ein Element aus dem normalen Fluss und schiebt es an den linken oder rechten Rand seines Containers. Text und Inline-Inhalt, die danach kommen, fließen darum herum.
Was macht clear?
clear schiebt ein Element unter alle früheren Floats auf der angegebenen Seite: clear: left, clear: right oder clear: both. So verhinderst du, dass Inhalt neben einem Float herumfließt.
Warum hat das Elternelement eines gefloateten Elements die Höhe null?
Floats liegen außerhalb des normalen Flusses, also hat ein Elternelement mit ausschließlich gefloateten Kindern keinen Inhalt im Fluss und fällt zusammen. Gib dem Elternelement display: flow-root, und es wächst um seine Floats herum.
Was ist ein Clearfix?
Ein Trick, damit ein Elternelement seine Floats einschließt, traditionell ein Pseudoelement ::after mit clear: both. Heute erledigt display: flow-root am Elternelement das in einer Zeile.
Sollte ich float für das Layout verwenden?
Nein. Floats wurden für Spalten genutzt, bevor es Flexbox und Grid gab. Nimm Flexbox oder Grid für das Layout und behalte float für seine ursprüngliche Aufgabe: Text um ein Bild oder ein Zitat fließen lassen.
