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.
✨ Frag Lara — deine KI-Lernpartnerin
Entsperre personalisierte Lernunterstützung. Lara kann Lektionen erklären, Themen zusammenfassen und deine Lernfragen beantworten — verfügbar ab dem Go-Tarif.
Lara hilft dir, schneller zu lernen — exklusiv für ReadyTools Go-, Plus- und Max-Mitglieder.
