CSS float und clear

Die Eigenschaften float und clear gehören zu den älteren CSS-Techniken, mit denen Elemente nebeneinander angeordnet werden konnten. Auch wenn Flexbox und Grid heute beliebter sind, bleibt float besonders für Textumfluss wichtig.

Funktionsweise von float und clear

Mit float kann ein Element an die linke oder rechte Seite des Elterninhalts verschoben werden, während der restliche Inhalt darum herumfließt. Die Eigenschaft clear stellt sicher, dass ein neues Element nicht neben dem float erscheint, sondern darunter beginnt.

Eigenschaft	Beschreibung
float: left \| right	Das Element schwebt nach links oder rechts, und der restliche Inhalt fließt darum herum.
clear: left \| right \| both	Verhindert, dass das Element neben einem float erscheint.

Beispiel mit float und clear

Im folgenden Beispiel schwebt ein Element nach links, ein anderes nach rechts, und ein clear-Element sorgt dafür, dass der nächste Inhalt darunter beginnt.

Mit clear: both erreichen wir, dass die grüne Box unter den beiden schwebenden Elementen platziert wird.

Tipps zur Verwendung von float und clear

float und clear können für einfache Layouts effektiv sein, aber in modernen Projekten sollte man eher Flexbox oder Grid einsetzen.

float ist besonders für Bilder und Textumfluss geeignet.
Verwende immer clear oder clearfix-Lösungen, um ein stabiles Layout zu gewährleisten.
Versuche nicht, vollständige Layouts nur mit float zu erstellen, da sie schwer zu pflegen und unflexibel sind.