CSS float-Eigenschaft
Die CSS-Eigenschaft float legt fest, ob ein Element schweben soll oder nicht. Beispiele und Übungen für Einsteiger.
Die CSS-Eigenschaft float nimmt ein Element aus dem normalen Dokumentfluss heraus und schiebt es nach links oder rechts seines Containers, sodass nachfolgender Text und Inline-Inhalt darum herumfließen kann. Ursprünglich wurde sie entwickelt, um Text um Bilder fließen zu lassen (ähnlich wie in einem Magazin-Layout), und das bleibt bis heute ihre klarste Anwendung.
Diese Seite behandelt, was float bewirkt, welche Werte es gibt, wie es mit der Eigenschaft clear zusammenwirkt, das Problem des „kollabierten Elternelements" und die clearfix-Lösung sowie wann stattdessen Flexbox verwendet werden sollte.
Wenn ein Element schwebend (floated) ist:
- Es wird aus dem normalen Fluss entfernt, sodass Block-Level-Elemente dahinter nach oben rücken, um den Platz zu füllen.
- Inline-Inhalte (Text, Inline-Bilder) umbrechen sich entlang der Seite des schwebenden Elements.
- Das Float-Element schrumpft auf die Größe seines Inhalts, sofern keine explizite
widthangegeben wird.
Die Eigenschaft clear ist die natürliche Ergänzung zu float: Sie weist ein Element an, unterhalb vorangehender Floats zu erscheinen, anstatt neben ihnen zu stehen.
Die Eigenschaft float wird bei absolut positionierten Elementen (position: absolute oder position: fixed) ignoriert, da diese bereits aus dem normalen Fluss herausgenommen sind.
| Anfangswert | none |
|---|---|
| Anwendbar auf | Alle Elemente. |
| Vererbbar | Nein. |
| Animierbar | Nein. |
| Version | CSS1 |
| DOM-Syntax | object.style.cssFloat = "right"; |
Syntax
Syntax der CSS-Eigenschaft float
float: none | left | right | initial | inherit;Beispiel der float-Eigenschaft:
Beispiel der CSS-Eigenschaft float mit dem Wert right
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
float: right;
background: #ccc;
}
</style>
</head>
<body>
<h2>Float property example</h2>
<img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" alt="W3dcos" />
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</body>
</html>Ergebnis
Im folgenden Beispiel schwebt das Bild nach links, sodass der Absatztext entlang seiner rechten Kante umgebrochen wird.
Beispiel zur Verwendung der float-Eigenschaft zum Fließen eines Bildes:
Beispiel der CSS-Eigenschaft float mit dem Wert left
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
float: left;
background: #ccc;
}
</style>
</head>
<body>
<h2>Float property example</h2>
<img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" alt="W3dcos" />
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</body>
</html>Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| none | Das Element schwebt nicht und wird dort angezeigt, wo es im Text vorkommt. Dies ist der Standardwert dieser Eigenschaft. | Ausprobieren » |
| left | Das Element schwebt nach links. | Ausprobieren » |
| right | Das Element schwebt nach rechts. | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom Elternelement. |
Das Problem des kollabierten Elternelements
Ein schwebendes Element wird aus dem normalen Fluss herausgenommen, sodass sein Elternelement es bei der Berechnung der eigenen Höhe nicht mehr berücksichtigt. Enthält ein Container nur schwebende Kindelemente, kollabiert er auf null Höhe — Hintergründe und Rahmen verschwinden, und nachfolgender Inhalt kann unter die Floats rutschen.
<!DOCTYPE html>
<html>
<head>
<style>
.box { border: 2px solid #1a7e3c; }
.box img { float: left; }
</style>
</head>
<body>
<!-- The border collapses around the floated image -->
<div class="box">
<img src="logo.png" alt="logo" width="80" height="80" />
</div>
</body>
</html>Die clearfix-Lösung
Die klassische, abhängigkeitsfreie Methode, damit ein Elternelement seine Floats enthält, ist der clearfix: Es wird ein generiertes Pseudo-Element hinzugefügt, das die Floats löscht. Die Klasse clearfix wird auf das Elternelement angewendet.
.clearfix::after {
content: "";
display: block;
clear: both;
}Außerdem kann die Eindämmung mit overflow: auto (oder hidden) am Elternelement erzwungen werden, oder mit display: flow-root, das speziell dazu dient, einen neuen Block-Formatierungs-Kontext ohne Nebeneffekte zu erstellen. Weitere Informationen zu den Kompromissen finden Sie unter overflow.
Wann float verwendet werden sollte (und wann nicht)
Verwenden Sie float, wenn Sie wirklich möchten, dass Inhalt ein Element umfließt — typischerweise ein Bild oder ein Zitat innerhalb von laufendem Text. Dafür wurde es entwickelt.
Vermeiden Sie float für das Seitenlayout (Seitenleisten, Spalten, Navigationszeilen). Es wurde jahrelang dafür missbraucht, ist aber fragil und erfordert clearfix-Hacks. Für modernes Layout greifen Sie auf Flexbox für eindimensionale Zeilen/Spalten oder CSS Grid für zweidimensionale Layouts zurück. Siehe auch display und position.