float

Die CSS-Eigenschaft float wird zur Positionierung und zum Layout auf Webseiten verwendet. Eine gängige Anwendung ist das Floaten eines Bildes an einer Seite, sodass Text darum herum fließt.

.intro-img {
  float: left;
}

Syntax

float = 
  block-start      |
  block-end        |
  inline-start     |
  inline-end       |
  snap-block       |
  <snap-block()>   |
  snap-inline      |
  <snap-inline()>  |
  left             |
  right            |
  top              |
  bottom           |
  none             |
  footnote         

<snap-block()> = 
  snap-block( <length> , [ start | end | near ]? )  

<snap-inline()> = 
  snap-inline( <length> , [ left | right | near ]? )  

• Initialwert: none
• Gilt für: Alle Elemente, hat aber keine Auswirkung, wenn der Wert von display none ist.
• Vererbt: nein
• Berechneter Wert: wie angegeben
• Animationstyp: diskret

Werte

/* Keyword values */
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

/* Global values */
float: inherit;
float: initial;
float: revert;
float: revert-layer;
float: unset;

• none: Das Element floatt nicht. Dies ist der Anfangswert.
• left: Floatt das Element nach links in seinem Container.
• right: Floatt das Element nach rechts in seinem Container.
• inline-start: Das logische Äquivalent von left, basierend auf dem writing-mode.
• inline-end: Das logische Äquivalent von right, basierend auf dem writing-mode.

Ein gefloatetes Element wird automatisch zu display: block;

Was bedeutet „float“?

Um den Zweck und die Herkunft von float zu verstehen, können wir uns dem Printdesign zuwenden. In einem Printlayout können Bilder so in die Seite eingefügt werden, dass Text bei Bedarf um sie herum fließt. Dies wird allgemein und korrekt als „Textumbruch“ bezeichnet. Hier ist ein Beispiel dafür.

In Seitenlayoutprogrammen können die Textboxen angewiesen werden, den Textumbruch zu berücksichtigen oder ihn zu ignorieren. Wenn der Textumbruch ignoriert wird, können die Wörter über das Bild fließen, als wäre es nicht da. Das ist der Unterschied, ob dieses Bild Teil des Flusses der Seite ist oder nicht. Webdesign ist sehr ähnlich.

Im Webdesign verhalten sich Seitenelemente mit der CSS-Eigenschaft float ähnlich wie die Bilder im Printlayout, um die herum Text fließt. Gefloatete Elemente bleiben Teil des Flusses der Webseite. Dies unterscheidet sich deutlich von Seitenelementen, die absolut positioniert sind. Absolut positionierte Seitenelemente werden aus dem Fluss der Webseite entfernt, so wie wenn der Textbox im Printlayout gesagt wurde, den Seitenumbruch zu ignorieren. Absolut positionierte Seitenelemente beeinflussen nicht die Position anderer Elemente, und andere Elemente beeinflussen sie nicht, egal ob sie sich berühren oder nicht.

Demo

Diese Demo zeigt einen Artikel mit zwei Bildern: eines auf float: left gesetzt und eines auf float: right gesetzt. Drücken Sie die Schaltfläche „Floats umschalten“, um die Floats ein- und auszuschalten.

Floats für Layouts

Abgesehen vom einfachen Beispiel des Umfließens von Text um Bilder herum können Floats verwendet werden, um ganze Web-Layouts zu erstellen.

Floats sind auch bei kleineren Instanzen für das Layout hilfreich. Nehmen wir zum Beispiel diesen kleinen Bereich einer Webseite. Wenn wir float für unser Avatarbild verwenden, wird der Text in der Box bei Größenänderung des Bildes neu umgebrochen, um ihn zu berücksichtigen.

Dasselbe Layout könnte auch mit relativer Positionierung auf dem Container und absoluter Positionierung auf dem Avatar erreicht werden. Aber wenn es auf diese Weise gemacht wird, würde der Text vom Avatar unbeeinflusst bleiben und sich bei Größenänderung nicht neu anordnen können.

Demo

Diese Demo zeigt einen Avatar mit float: left. Drücken Sie die Schaltfläche „Bildgröße umschalten“, um eine breitere Version des Avatarbildes zu sehen. Beachten Sie, dass der Text umgebrochen wird, um das Bild aufzunehmen, anstatt über das Bild zu laufen.

Clearing the float

Die Schwester-Eigenschaft von Float ist clear. Ein Element, dessen clear-Eigenschaft gesetzt ist, wird sich nicht neben den Float schmiegen, wie es der Float wünscht, sondern sich nach unten an den Float vorbei bewegen. Eine Illustration ist wieder hilfreicher als Worte.

Im obigen Beispiel ist die Seitenleiste nach rechts gefloatet und kürzer als der Hauptinhalt. Der Footer muss dann in diesen verfügbaren Platz nach oben springen, wie es der Float erfordert. Um dieses Problem zu lösen, kann der Footer gecleart werden, um sicherzustellen, dass er unter beiden gefloateten Spalten bleibt.

#footer {
  clear: both;
}

Clear hat ebenfalls vier gültige Werte. Der Wert both wird am häufigsten verwendet, was Floats von beiden Richtungen löscht. Die Werte left und right können verwendet werden, um den Float jeweils nur von einer Richtung zu löschen. Der Anfangswert ist none, was normalerweise unnötig ist, es sei denn, es wird verwendet, um einen explizit gesetzten clear-Wert zu entfernen. Der Wert inherit bewirkt, dass das Element den clear-Wert seines Elternelements erbt. Seltsamerweise unterstützte Internet Explorer diesen Wert erst ab IE8.

Das Löschen nur des left- oder right-Floats, obwohl seltener anzutreffen, hat definitiv seinen Nutzen.

Der große Kollaps

Eines der verwirrenderen Dinge bei der Arbeit mit Floats ist, wie sie das Element beeinflussen können, das sie enthält (ihr „Elternelement“). Wenn ein Elternelement nichts als gefloatete Elemente enthält, kollabiert seine Höhe auf Null. Das ist nicht immer offensichtlich, wenn der Elternteil keinen optisch wahrnehmbaren Hintergrund hat, aber es ist wichtig, sich dessen bewusst zu sein.

So kontraintuitiv das Kollabieren auch erscheinen mag, die Alternative ist schlimmer. Betrachten Sie dieses Szenario.

Wenn sich das obere Blockelement automatisch erweitert hätte, um das gefloatete Element aufzunehmen, hätten wir einen unnatürlichen Abstand im Textfluss zwischen den Absätzen, ohne praktische Möglichkeit, ihn zu beheben. Wenn das der Fall wäre, würden wir Designer uns viel stärker über dieses Verhalten beschweren, als wir es über das Kollabieren tun.

Das Kollabieren muss fast immer behandelt werden, um seltsame Layouts und browserübergreifende Probleme zu vermeiden. Wir beheben es, indem wir den Float nach den gefloateten Elementen im Container, aber vor dem Schließen des Containers, clearen.

Techniken zum Clearen von Floats

Wenn Sie sich in einer Situation befinden, in der Sie immer wissen, welches das nachfolgende Element sein wird, können Sie diesem Element den Wert clear: both; zuweisen und Ihre Arbeit fortsetzen. Das ist ideal, da es keine ausgefallenen Hacks oder zusätzliche Elemente erfordert und somit perfekt semantisch ist. Natürlich läuft es in der Regel nicht so und wir brauchen mehr Werkzeuge zum Clearen von Floats in unserer Toolbox.

• Die Methode mit dem leeren Div ist buchstäblich ein leeres Div <div style="clear: both;"></div>. Manchmal sieht man ein <br />-Element oder ein anderes zufälliges Element, aber ein Div ist am gebräuchlichsten, da es keine Standardbrowserdarstellung hat, keine spezielle Funktion erfüllt und unwahrscheinlich ist, dass es generisch mit CSS gestylt wird. Diese Methode wird von semantischen Puristen verachtet, da sie keine kontextuelle Bedeutung für die Seite hat und rein zur Darstellung dient. Natürlich haben sie im strengsten Sinne Recht. Aber es erfüllt seinen Zweck und schadet niemandem.
• Die Overflow-Methode basiert auf dem Setzen der overflow CSS-Eigenschaft auf einem Elternelement. Wenn diese Eigenschaft auf auto oder hidden auf dem Elternelement gesetzt ist, erweitert sich das Elternelement, um die Floats aufzunehmen, und cleart es effektiv für nachfolgende Elemente. Diese Methode kann schön semantisch sein, da sie möglicherweise keine zusätzlichen Elemente benötigt. Wenn Sie jedoch feststellen, dass Sie ein neues div hinzufügen müssen, nur um dies anzuwenden, ist es genauso unsemantisch wie die leere div-Methode und weniger anpassungsfähig. Beachten Sie auch, dass die Overflow-Eigenschaft nicht speziell zum Clearen von Floats dient. Achten Sie darauf, keine Inhalte zu verbergen oder unerwünschte Scrollbalken auszulösen.
• Die Easy Clearing Methode (auch bekannt als „clearfix“) verwendet einen cleveren CSS-Pseudo-Selektor (:after), um Floats zu clearen. Anstatt den Overflow auf dem Elternteil zu setzen, weisen Sie ihm eine zusätzliche Klasse wie „clearfix“ zu. Wenden Sie dann dieses CSS an.

.clearfix:after { 
  content: "";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

Dies wendet einen kleinen Inhalt an, der vor der Ansicht verborgen ist und nach dem Elternelement platziert wird, um den Float zu clearen. Das ist noch nicht die ganze Geschichte, da zusätzlicher Code benötigt wird, um ältere Browser zu unterstützen. 

Siehe auch diesen Snippet, der die neuesten und besten Clearfixes, einschließlich des neueren „micro clearfix“, im Auge behält.

Unterschiedliche Szenarien erfordern unterschiedliche Float-Clearing-Methoden. Nehmen wir zum Beispiel ein Raster von Blöcken, die jeweils von unterschiedlichen Typen sind.

Um ähnliche Blöcke optisch besser zu verbinden, möchten wir eine neue Zeile beginnen, wann immer wir wollen, in diesem Fall, wenn sich die Farbe ändert. Wir könnten entweder die Overflow- oder die Easy Clearing-Methode verwenden, wenn jede Farbengruppe ein Elternelement hätte. Oder wir verwenden die leere Div-Methode zwischen jeder Gruppe. Drei umhüllende Divs, die vorher nicht existierten, oder drei nachfolgende Divs, die vorher nicht existierten. Ich überlasse Ihnen die Entscheidung, was besser ist.

Probleme mit Floats

Floats werden oft als zerbrechlich bezeichnet. Ein Großteil dieser Zerbrechlichkeit rührte von Fehlern in IE6 und IE7 her. Da diese Browser in der Vergangenheit verschwinden, verschwinden auch diese Fehler. Aber es lohnt sich immer noch, sie zu verstehen, wenn Sie jemals „OldIE“ debuggen müssen.

• Pushdown ist ein Symptom dafür, dass ein Element innerhalb eines gefloateten Elements breiter als der Float selbst ist (typischerweise ein Bild). Die meisten Browser rendern das Bild außerhalb des Floats, aber der überstehende Teil beeinflusst nicht das andere Layout. Alte Versionen von IE erweiterten den Float, um das Bild aufzunehmen, was das Layout oft drastisch beeinflusste. Ein gängiges Beispiel ist ein Bild, das aus dem Hauptinhalt herausragt und die Seitenleiste nach unten drückt.
  
  Schnelle Lösung: Stellen Sie sicher, dass Sie keine Bilder haben, die dies tun, verwenden Sie overflow: hidden;, um Überläufe abzuschneiden.
• Double Margin Bug – Eine weitere Sache, die Sie bei der Arbeit mit IE 6 beachten sollten, ist, dass, wenn Sie einen Rand in die gleiche Richtung wie der Float anwenden, dieser den Rand verdoppelt. Schnelle Lösung: Setzen Sie display: inline auf den Float, und machen Sie sich keine Sorgen, er bleibt ein Block-Level-Element.
• Der 3px Jog tritt auf, wenn Text, der sich neben einem gefloateten Element befindet, auf mysteriöse Weise um 3 Pixel weggestoßen wird, wie ein seltsames Kraftfeld um den Float. Schnelle Lösung: Setzen Sie eine Breite oder Höhe auf den betroffenen Text.
• In IE 7 war der Bottom Margin Bug, dass der untere Rand von gefloateten Kindern innerhalb eines gefloateten Elternelements vom Elternelement ignoriert wurde. Schnelle Lösung: Verwenden Sie stattdessen den unteren Innenabstand auf dem Elternelement.

Alternativen

Wenn Sie Textumfluss um Bilder benötigen, gibt es eigentlich keine Alternativen zu Float. Apropos, schauen Sie sich diese ziemlich clevere Technik an, um Text um unregelmäßige Formen zu wickeln. Aber für Seitenlayouts gibt es definitiv Optionen. Eric Sol hat einen Artikel auf A List Apart, Faux Absolute Positioning, der eine sehr interessante Technik beschreibt, die in vielerlei Hinsicht die Flexibilität von Floats mit der Stärke der absoluten Positionierung kombiniert.

CSS3 geht das Seitenlayout auf verschiedene Arten an.

• Flexbox
• Mehrspaltiges Layout
• Grid Layout

Absolut positionierte Floats (z. B. Sie positionieren absolut wie gewohnt, aber das Element kann immer noch andere Elemente beeinflussen, wie z. B. Textumbruch darum herum) wurden diskutiert, aber ich denke, die Idee wurde aufgrund von Ähnlichkeiten mit anderen robusteren Layout-Ideen verworfen. Video

Ich habe vor einiger Zeit einen Screencast gemacht, der viele dieser Float-Konzepte erklärt.

Browser-Unterstützung

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Alle	Alle	Alle	Alle	Alle	Alle	Alle

Weitere Informationen

• CSS 2.2 Spezifikation (Definition der float-Eigenschaft)
• CSS Logische Eigenschaften und Werte, Level 1 (float logische Eigenschaftswerte)
• float bei MDN

Verwandte Tricks

Verwandt