Alles über Floats

Was ist „Float“?

Float ist eine CSS-Positionierungseigenschaft. Um seinen Zweck und Ursprung zu verstehen, können wir uns die Printgestaltung ansehen. In einem Printlayout können Bilder so auf der Seite platziert werden, dass der Text bei Bedarf um sie herum fließt. Dies wird allgemein und treffend als „Textumbruch“ bezeichnet. Hier ist ein Beispiel dafür.

In Seitenlayoutprogrammen können die Textboxen so eingestellt werden, dass sie den Textumbruch berücksichtigen oder ignorieren. Wenn der Textumbruch ignoriert wird, können die Wörter einfach ü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 werden Seitenelemente mit der CSS-floatEigenschaft angewendet, ähnlich wie Bilder im Printlayout, um die sie herumfließt. Gefeaturete 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*, ähnlich wie die Textbox im Printlayout, der 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.

Das Setzen des Floats auf ein Element mit CSS geschieht so

#sidebar {
  float: right;			
}

Es gibt vier gültige Werte für die Float-Eigenschaft. Left und Right flößen Elemente in die jeweilige Richtung. None (der Standardwert) stellt sicher, dass das Element nicht floaten wird, und Inherit übernimmt den Float-Wert vom übergeordneten Element.

Wofür werden Floats verwendet?

Abgesehen vom einfachen Beispiel des Textumbruchs um Bilder herum können Floats verwendet werden, um *ganze Web-Layouts* zu erstellen.

Während Floats immer noch für Layouts verwendet werden können, haben wir heutzutage weitaus leistungsfähigere Werkzeuge zur Erstellung von Layouts auf Webseiten. Nämlich Flexbox und Grid. Floats sind immer noch nützlich zu kennen, da sie einige einzigartige Fähigkeiten besitzen, die in diesem Artikel behandelt werden.

Floats sind auch für Layouts in kleineren Instanzen hilfreich. Nehmen wir zum Beispiel diesen kleinen Bereich einer Webseite. Wenn wir Float für unser kleines Avatarbild verwenden, wird der Text in der Box bei Größenänderung des Bildes neu umfließen, um sich anzupassen.

Das gleiche Layout könnte auch mit relativer Positionierung des Containers und absoluter Positionierung des Avatars erreicht werden. Wenn man es auf diese Weise macht, wäre der Text vom Avatar unbeeinflusst und könnte sich bei Größenänderung nicht neu anordnen.

Float löschen (Clearing the Float)

Die Schwester-Eigenschaft von Float istclear. Ein Element, auf das die clear-Eigenschaft angewendet wird, rückt nicht neben den Float, wie es der Float wünscht, sondern verschiebt sich nach unten, vorbei am Float. Wiederum tut eine Illustration wahrscheinlich mehr Gutes als Worte.

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

#footer {
  clear: both;			
}

Clear hat ebenfalls vier gültige Werte. Both wird am häufigsten verwendet, was Floats aus beiden Richtungen löscht. Left und Right können verwendet werden, um nur Floats aus einer Richtung zu löschen. None ist der Standardwert, der normalerweise unnötig ist, es sei denn, um einen Clear-Wert aus einer Kaskade zu entfernen. Inherit wäre der fünfte, wird aber seltsamerweise in Internet Explorer nicht unterstützt. Nur den linken oder rechten Float zu löschen, ist zwar seltener anzutreffen, hat aber definitiv seinen Nutzen.

Der große Kollaps

Eines der verwirrenderen Dinge bei der Arbeit mit Floats ist, wie sie das Element, das sie enthält (ihr „Elternelement“), beeinflussen können. Wenn dieses Elternelement nichts als gefeaturete Elemente enthielte, würde die Höhe davon buchstäblich auf Null kollabieren. Das ist nicht immer offensichtlich, wenn das Elternelement keinen visuell 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 gefeaturete Element aufzunehmen, hätten wir einen unnatürlichen Abstand im Textfluss zwischen den Absätzen, ohne praktische Möglichkeit, ihn zu beheben. Wenn dies der Fall wäre, würden wir Designer uns viel mehr über dieses Verhalten beschweren als über das Kollabieren.

Kollabieren muss fast immer behandelt werden, um seltsame Layout- und Cross-Browser-Probleme zu verhindern. Wir beheben es, indem wir den Float *nach* den gefeatureten Elementen im Container, aber *vor* dem Schließen des Containers löschen.

Techniken zum Löschen von Floats

Wenn Sie sich in einer Situation befinden, in der Sie immer wissen, welches das nachfolgende Element ist, können Sie denclear: both;Wert auf dieses Element anwenden und mit Ihrem Geschäft fortfahren. Das ist ideal, da es keine ausgefallenen Hacks und keine zusätzlichen Elemente erfordert, was es perfekt semantisch macht. Natürlich laufen die Dinge nicht immer so, und wir brauchen mehr Werkzeuge zum Löschen von Floats in unserer Werkzeugkiste.

• Die Leere-Div-Methode ist buchstäblich ein leeres Div. <div style="clear: both;"></div> Manchmal sehen Sie ein <br> Element oder ein anderes zufälliges Element, aber Div ist am gebräuchlichsten, da es keine Browser-Standardstile hat, keine besondere Funktion besitzt und wahrscheinlich nicht generisch mit CSS gestylt wird. Diese Methode wird von semantischen Puristen verachtet, da ihre Anwesenheit keinerlei 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 beruht auf dem Setzen der CSS-`overflow`-Eigenschaft auf einem übergeordneten Element. Wenn diese Eigenschaft auf `auto` oder `hidden` beim übergeordneten Element gesetzt ist, dehnt sich das übergeordnete Element aus, um die Floats aufzunehmen und löscht sie effektiv für nachfolgende Elemente. Diese Methode kann wunderschön semantisch sein, da sie möglicherweise keine zusätzlichen Elemente benötigt. Wenn Sie jedoch ein neues Div hinzufügen, nur um dies anzuwenden, ist es genauso wenig semantisch wie die Methode mit dem leeren Div und weniger anpassungsfähig. Beachten Sie auch, dass die `overflow`-Eigenschaft nicht speziell zum Löschen von Floats dient. Achten Sie darauf, Inhalte nicht zu verstecken oder unerwünschte Scrollbalken auszulösen.
• Die Easy Clearing Methode verwendet einen cleveren CSS-Pseudo-Selektor (`:after`), um Floats zu löschen. Anstatt `overflow` auf dem übergeordneten Element 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 dem übergeordneten Element verborgen ist und den Float löscht. Das ist noch nicht die ganze Geschichte, da zusätzlicher Code benötigt wird, um ältere Browser zu unterstützen.

Unterschiedliche Szenarien erfordern unterschiedliche Float-Clearing-Methoden. Nehmen wir zum Beispiel ein Raster von Blöcken unterschiedlicher Art.

Um die ähnlichen Blöcke visuell besser zu verbinden, wollen wir eine neue Zeile starten, 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 der Farbengruppen ein übergeordnetes Element hätte. Oder wir verwenden die Leere-Div-Methode zwischen jeder Gruppe. Drei umhüllende Divs, die vorher nicht existierten, oder drei Nach-Divs, die vorher nicht existierten. Ich überlasse Ihnen die Entscheidung, was besser ist.

Probleme mit Floats

Floats werden oft als *fragil* bezeichnet. Der Großteil dieser Fragilität stammt von IE 6 und einer Flut von Float-bezogenen Bugs. Da immer mehr Designer die Unterstützung für IE 6 einstellen, ist es Ihnen vielleicht egal, aber für die Leute, denen es wichtig ist, hier eine kurze Zusammenfassung.

• Pushdown ist ein Symptom dafür, dass ein Element innerhalb eines gefeatureten 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 Layout. IE erweitert den Float, um das Bild aufzunehmen, was oft das Layout drastisch beeinflusst. Ein häufiges Beispiel ist ein Bild, das aus dem Hauptinhalt herausragt und die Seitenleiste darunter schiebt.

• Doppel-Margin-Bug – Eine weitere Sache, die man bei der Arbeit mit IE 6 beachten muss, ist, dass, wenn Sie einen Rand in die gleiche Richtung wie den 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 3-Pixel-Sprung tritt auf, wenn Text, der sich neben einem gefeatureten Element befindet, mysteriöserweise um 3 Pixel weggedrückt 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 gibt es den Bottom Margin Bug, bei dem, wenn ein gefeaturetes Elternelement gefeaturete Kinder hat, der untere Rand dieser Kinder vom Elternelement ignoriert wird. Schnelle Lösung: Verwenden Sie stattdessen Padding unten am Elternelement.

Alternativen

Wenn Sie Text um Bilder fließen lassen müssen, gibt es wirklich keine Alternativen zu Float. Apropos, schauen Sie sich diese ziemlich clevere Technik an, um Text um unregelmäßige Formen fließen zu lassen. Aber für Seitenlayouts gibt es definitiv Alternativen. Eric Sol hier bei A List Apart hat einen Artikel über Faux Absolute Positioning, eine sehr interessante Technik, die in vielerlei Hinsicht die Flexibilität von Floats mit der Stärke von absoluter Positionierung kombiniert. CSS3 hat das Template Layout Module, das, wenn es weit verbreitet ist, die bevorzugte Technik für Seitenlayouts sein wird.

Video

Ich habe vor einiger Zeit ein Screencast erstellt, in dem viele dieser Float-Konzepte erklärt werden.