Die CSS float-Eigenschaft verstehen und anwenden
In diesem Beitrag lernt ihr die CSS float-Eigenschaft, sowie die in diesem Zusammenhang häufig auftretenden Probleme kennen.

Die CSS-Eigenschaft »float« ist essentiell um die Position von Elementen auf einer Website zu steuern. Die Funktionsweise ist eigentlich nicht kompliziert, doch es können Probleme beim »Floaten« von Elementen auftreten die gerade für Anfänger nicht nachvollziehbar sind. In diesem Artikel beschreiben wir daher sowohl die grundsätzliche Handhabung als auch die Probleme. Anhand verschiedener Beispiele zeigen wir euch wie Floats kontrolliert eingesetzt werden können.
Schulungen von kulturbanause
Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen
Die CSS-Eigenschaft float
Mit der CSS-Eigenschaft float
(»float« zu Deutsch »schweben«) weisen wir ein Element an, sich an den linken oder an den rechten Rand seines Elternelements zu schieben. Das hat nicht nur Auswirkungen auf das Element selbst, sondern vor allem auf andere Elemente, die mit dem »gefloateten« Element in Verbindung stehen.
In Zusammenhang mit float
stehen uns drei Werte zur Verfügung: left
, right
und none
.
float: none;
Wenn ihr es nicht selbst im CSS-Code geschrieben habt, »floaten« Elemente nicht.float: none
ist daher der Standardwert.float: left;
Wenn ein Elementfloat:left
erhält positioniert es sich an der linken Seite seines Elternelements. Darauffolgende Elemente ordnen sich dann, sofern genügend Platz vorhanden ist, rechts davon an. Andernfalls rutschen sie eine Zeile unter das gefloatete Element.float: right;
Wenn ein Elementfloat: right;
erhält, orientiert es sich rechts in seinem Elternelement. Darauffolgende Elemente ordnen sich nur links davon an, sofern sie ebenfalls die Eigenschaft float: right besitzen.
Beispiel: Text um Bilder herum fließen lassen
Im folgenden Beispiel könnt ihr mit der float
Eigenschaft experimentieren und das Verhalten so hoffentlich besser nachvollziehen. Per Klick weist ihr einem Bild ein Floating-Verhalten zu. Das Bild bewegt sich dann zu einer Seite und der Text fließt auf der anderen Seite um das Bild herum.
Gefloatete Elemente verlassen den Standard-Dokumentfluss!
Mit Floats kann man nicht nur dafür sorgen, dass Text ein Bild umfließt. Es ist auch möglich und gängige Praxis Layouts mithilfe von Floats zu konstruieren. Allerdings können dabei Schwierigkeiten auftreten und es gilt einige Dinge zu beachten.
Floatende Elemente verlassen den Standard-Dokumentfluss einer Website. Andere, nicht floatende, Elemente verhalten sich daher so, als würde das gefloatete Element nicht existieren. Das führt zu folgenden Problemen:
Problem 1: Das kollabierende Elternelement
Wenn ein Eltern-Element floatende Kind-Elemente enthält, schrumpft das Eltern-Element auf die Höhe des letzten nicht floatenden Kind-Elements zusammen.
Dazu haben wir euch hier ein weiteres Beispiel erstellt:
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
.container {
border: 2px solid black;
}
.box {
float: none; /* Die float Eigenschaft wird beim Klicken des Buttons im Beispiel verändert*/
width: 200px;
height: 150px;
margin: 1em;
}
/* Hier folgend die Farben der Boxen */
Das Beispiel zeigt einen Container mit mehreren enthaltenen Boxen. Per Klick könnt ihr die Boxen floaten lassen. Folglich verlassen sie den Dokumentfluss und der Container weiß nicht mehr, dass die Boxen vorhanden sind. Er fällt folglich auf eine Höhe von Null zusammen.
Problem 2: Hintereinander liegende Elemente
Ein weiteres Problem besteht darin, dass Elemente plötzlich nicht mehr sichtbar sind. Wie bereits erwähnt verlassen floatende Elemente den normalen Dokumentenfluss und werden von nicht floatenden Elementen ignoriert. Wenn nun ein nicht floatendes Block-Element auf ein nach links floatendes Element folgt, rutscht es hinter das floatende Element. Das hängt damit zusammen, das dass sich beide Elemente oben links in ihrem Elternelement positionieren, da das zweite Element das erste floatende Element ignoriert.
Wir haben euch zu diesem Zweck ein weiteres Beispiel erstellt.
Lösungsansätze
Für die zuvor beschriebenen Probleme gibt es verschiedene Lösungsansätze. Eine Lösung kann darin bestehen alle Elemente zu floaten. Damit erkennen sie sich gegenseitig und verhalten sich entsprechend.
In der Praxis ist das allerdings häufig nicht umsetzbar. Daher werden Floats i.d.R. gecleared.
Floats beenden mit clear
Die Eigenschaft »clear« (zu Deutsch: »abschalten«) beendet Floats. Erhält ein Element diese Eigenschaft, so schaltet es den Float vorangehender Elemente ab. Folgende Optionen stehen euch zur Verfügung:
clear: both
Floats beider Richtungen werden beendet. Normalerweise reicht das aus, um das gewünschte Ergebnis zu erzielen.clear: left
beendet nurfloat: left
clear: right
beendet nurfloat: right
Ein Element, das gecleared wurde, setzt sich nicht neben vorherige Elemente und versteckt sich auch nicht dahinter. Es positioniert sich eine Zeile darunter.
Damit wäre auch schon das Problem 2 gelöst. Wenn ihr vermeiden wollt, dass sich Elemente hinter floatenden Elementen verstecken, so müsst ihr ihnen einfach die Eigenschaft clear: both
verleihen und den vorherigen float abschalten.
Wir haben euch dazu eine weitere Demo vorbereitet:
Der »Clearfix«
Das Aufheben von Floats funktioniert nur dann, wenn auch ein Element vorhanden ist, dem clear
zugewiesen werden kann. Im Falle des kollabierenden Elternelements (Problem 1) existiert jedoch kein solches Element. Alle Kind-Elemente innerhalb des Containers werden gefloatet. Dieses Problem kann mit dem sog. Clearfix behoben werden:
Der Clearfix nutzt die Eigenschaft clear: both
und ein zusätzliches, unsichtbares Element, um die Höhe des Containers trotz floatenden Kind-Elementen korrekt anzupassen. Dieser Artikel erklärt die Vorgehensweise im Detail, die Anwendung ist letztlich ganz einfach und erfordert den nachfolgenden CSS-Code. Anschließend müsst ihr lediglich dem Elternelement die Klasse .clearfix
zuweisen und das Problem ist gelöst. Der Container passt seine Höhe nun automatisch korrekt an, so als würde er gewöhnliche Elemente ohne float
enthalten.
.clearfix::before,
.clearfix::after {
content: " ";
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1; /* Für den IE6 und IE7 */
}
Wir haben euch hierzu das bereits bekannte Beispiel noch einmal angepasst.
Browser-Support
CSS Floats werden in allen Browsern unterstützt. Im IE7 und älter gibt es jedoch noch weitere Bugs, auf die wir hier nicht eingegangen sind.
Feedback & Ergänzungen – 2 Kommentare
Kommentar zu dieser Seite
Website-Projekte mit kulturbanause
Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.
Übersicht Kompetenzen →Schulungen von kulturbanause
Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.
Übersicht Schulungsthemen →
Das Clearfix ist genial und hat mir super geholfen. Vielen Dank!!!
Sehr schön, das freut mich sehr für dich!