Die CSS float-Eigenschaft verstehen und anwenden

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.

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 Element float: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 Element float: 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.

Beispiel anschauen

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.

Beispiel anschauen

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.

Beispiel anschauen

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 nur float: left
• clear: right
beendet nur float: 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:

Beispiel anschauen

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.

Beispiel anschauen

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.

Geschrieben von kulturbanause Team

Beiträge bei denen das kulturbanause-Team als Autor angegeben ist, wurden von mehreren Personen in Zusammenarbeit geschrieben. Wir nutzen diesen Blog als öffentliches Archiv und um Web Designern bei ihren alltäglichen Problemen zu helfen. Neben diesem Blog bieten wir noch weitere Trainings-Möglichkeiten wie Schulungen, Bücher oder Video-Trainings an. Detaillierte Informationen findet ihr hier.