Float - CSS-Tricks

Anonim

Die floatEigenschaft in CSS wird zum Positionieren und Layouten auf Webseiten verwendet.

.module ( float: left; )

Werte

  • none: Das Element schwebt nicht. Dies ist der Anfangswert.
  • left: schwebt das Element links von seinem Container.
  • right: schwebt das Element rechts von seinem Container.
  • inherit: Das Element erbt die Float-Richtung seines übergeordneten Elements.
Hinweis: Ein schwebendes Element wird automatisch ausgeführt display: block;

Was bedeutet Float?

Um den Zweck und die Herkunft von zu verstehen float, können wir uns auf das Druckdesign konzentrieren. In einem Drucklayout können Bilder so in die Seite eingefügt werden, dass sie nach Bedarf von Text umschlossen werden. Dies wird allgemein und angemessen als "Textumbruch" bezeichnet. Hier ist ein Beispiel dafür.

In Seitenlayoutprogrammen können die Felder, in denen sich der Text befindet, angewiesen werden, den Textumbruch zu berücksichtigen oder zu ignorieren. Wenn Sie den Textumbruch ignorieren, können die Wörter direkt über das Bild fließen, als wäre es nicht einmal dort. Dies ist der Unterschied zwischen dem Bild, das Teil des Seitenflusses ist (oder nicht). Webdesign ist sehr ähnlich.

Im Webdesign entsprechen Seitenelemente mit der darauf floatangewendeten CSS- Eigenschaft genau den Bildern im Drucklayout, in denen der Text um sie herum fließt. Floated-Elemente bleiben Teil des Webseitenflusses. Dies unterscheidet sich deutlich von Seitenelementen, die eine absolute Positionierung verwenden. Absolut positionierten Seitenelemente werden entfernt von der Strömung der Webseite, wie wenn das Textfeld in dem Drucklayout wurde gesagt , den Seitenumbruch zu ignorieren. Absolut positionierte Seitenelemente wirken sich nicht auf die Position anderer Elemente aus, und andere Elemente wirken sich nicht auf sie aus, unabhängig davon, ob sie sich berühren oder nicht.

Demo

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

Siehe das Pen Float-Beispiel von CSS-Tricks (@ css-Tricks) auf CodePen.

Floats für Layout

Neben dem einfachen Beispiel für das Umbrechen von Bildern mit Text können Floats verwendet werden, um ganze Weblayouts zu erstellen .

Floats sind auch für das Layout in kleineren Instanzen hilfreich. Nehmen Sie zum Beispiel diesen kleinen Bereich einer Webseite. Wenn wir floatfür unser Avatar-Bild verwenden, fließt der Text in das Feld, wenn sich die Größe dieses Bildes ändert, um es aufzunehmen:

Das gleiche Layout könnte auch durch relative Positionierung auf dem Container und absolute Positionierung auf dem Avatar erreicht werden. Wenn dies jedoch so erfolgt, wird der Text vom Avatar nicht beeinflusst und kann bei einer Größenänderung nicht erneut ausgeführt werden.

Demo

Diese Demo zeigt einen Avatar mit float: leftangewendet. Drücken Sie die Taste „Bildgröße umschalten“, um eine breitere Version des Avatar-Bildes anzuzeigen. Beachten Sie, dass der Text erneut fließt, um das Bild aufzunehmen, anstatt über das Bild zu laufen.

Sehen Sie sich die Pen Float-Demo von CSS-Tricks (@ css-Tricks) auf CodePen an.

Float löschen

Floats Schwesterbesitz ist clear. Ein Element, für das die clearEigenschaft festgelegt ist, bewegt sich nicht wie vom Float gewünscht neben dem Float nach oben, sondern bewegt sich am Float vorbei nach unten. Wieder ist eine Illustration hilfreicher als Worte:

Im obigen Beispiel ist die Seitenleiste nach rechts verschoben und kürzer als der Hauptinhaltsbereich. Die Fußzeile muss dann in den verfügbaren Platz springen, wie es der Schwimmer benötigt. Um dieses Problem zu beheben, kann die Fußzeile gelöscht werden, um sicherzustellen, dass sie unter beiden schwebenden Spalten bleibt.

#footer ( clear: both; )

Clear hat ebenfalls vier gültige Werte. Der Wert bothwird am häufigsten verwendet, wodurch Floats aus beiden Richtungen gelöscht werden. Die Werte leftund rightkönnen verwendet werden, um den Schwimmer jeweils nur aus einer Richtung zu löschen. Der Anfangswert noneist normalerweise nicht erforderlich, es sei denn, er wird zum expliziten Entfernen eines festgelegten clearWerts verwendet. Der Wert inheritbewirkt, dass das Element den clearWert seines übergeordneten Elements erbt . Seltsamerweise unterstützte Internet Explorer diesen Wert erst im IE8.

Nur das Löschen leftoder rightSchweben, obwohl es in freier Wildbahn seltener vorkommt, hat definitiv seinen Nutzen.

Der große Zusammenbruch

Eines der verwirrendsten Dinge bei der Arbeit mit Floats ist, wie sie sich auf das Element auswirken können, das sie enthält (ihr „übergeordnetes“ Element). Wenn ein übergeordnetes Element nur schwebende Elemente enthält, wird seine Höhe auf nichts reduziert. Dies ist nicht immer offensichtlich, wenn der Elternteil keinen visuell wahrnehmbaren Hintergrund enthält, aber es ist wichtig, sich dessen bewusst zu sein.

So eingängig das Zusammenbrechen auch sein mag, die Alternative ist schlechter. Stellen Sie sich dieses Szenario vor:

Wenn das Blockelement oben automatisch erweitert worden wäre, um das schwebende Element aufzunehmen, hätten wir eine unnatürliche Abstandsunterbrechung im Textfluss zwischen Absätzen, ohne dass dies auf praktische Weise behoben werden könnte. Wenn dies der Fall wäre, würden wir Designer uns viel härter über dieses Verhalten beschweren als über das Zusammenbrechen.

Das Reduzieren muss fast immer behandelt werden, um seltsame Layout- und browserübergreifende Probleme zu vermeiden. Wir beheben das Problem, indem wir den Schwimmer nach den schwimmenden Elementen im Container, aber vor dem Schließen des Containers löschen.

Techniken zum Löschen von Schwimmern

Wenn Sie sich in einer Situation befinden, in der Sie immer wissen, was das nachfolgende Element sein wird, können Sie den clear: both;Wert auf dieses Element anwenden und Ihr Geschäft betreiben. Dies ist ideal, da es keine ausgefallenen Hacks und keine zusätzlichen Elemente erfordert, was es perfekt semantisch macht. Natürlich funktionieren die Dinge normalerweise nicht so und wir brauchen mehr Float-Clearing-Tools in unserer Toolbox.

  • Die Empty Div-Methode ist buchstäblich eine leere Div. . Manchmal wird ein
    Element oder ein anderes zufälliges Element verwendet, aber div wird am häufigsten verwendet, da es kein Browser-Standard-Styling hat, keine spezielle Funktion hat und wahrscheinlich nicht generisch mit CSS gestaltet wird. Diese Methode wird von semantischen Puristen verachtet, da sie für die Seite keine kontextbezogene Bedeutung hat und nur zur Präsentation dient. Natürlich haben sie im strengsten Sinne Recht. Aber es erledigt den Job und tut niemandem weh.
  • Die Überlaufmethode basiert auf dem Festlegen der overflowCSS-Eigenschaft für ein übergeordnetes Element. Wenn diese Eigenschaft auf autooder hiddenfür das übergeordnete Element festgelegt ist, wird das übergeordnete Element so erweitert, dass es die Gleitkommazahlen enthält, wodurch es effektiv für nachfolgende Elemente gelöscht wird. Diese Methode kann sehr semantisch sein, da möglicherweise keine zusätzlichen Elemente erforderlich sind. Wenn Sie jedoch feststellen, dass Sie eine neue hinzufügen div, um dies anzuwenden, ist diese ebenso unsemantisch wie die leere divMethode und weniger anpassungsfähig. Beachten Sie auch, dass die Überlaufeigenschaft nicht speziell zum Löschen von Floats geeignet ist. Achten Sie darauf, Inhalte nicht auszublenden oder unerwünschte Bildlaufleisten auszulösen.
  • Die Easy Clearing-Methode (auch als „Clearfix“ bezeichnet) verwendet einen cleveren CSS-Pseudo-Selektor ( :after), um Floats zu löschen. Anstatt den Überlauf für das übergeordnete Element festzulegen, wenden Sie eine zusätzliche Klasse wie "clearfix" darauf an. Dann wenden Sie dieses CSS an: 
    .clearfix:after ( content: ""; visibility: hidden; display: block; height: 0; clear: both; )

    Dadurch wird nach dem übergeordneten Element, das den Float löscht, ein kleiner Teil des Inhalts angezeigt, der nicht sichtbar ist. Dies ist nicht die ganze Geschichte, da zusätzlicher Code verwendet werden muss, um älteren Browsern gerecht zu werden. Hinweis: Sehen Sie sich auch dieses Snippet an, das die neuesten und besten Clearfixes enthält, einschließlich des neueren „Micro Clearfix“.

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

Um die ähnlichen Blöcke besser visuell zu verbinden, möchten wir nach Belieben eine neue Zeile beginnen, in diesem Fall, wenn sich die Farbe ändert. Wir könnten entweder die Überlauf- oder die einfache Löschmethode verwenden, wenn jede der Farbgruppen ein übergeordnetes Element hätte. Oder wir verwenden die leere div-Methode zwischen jeder Gruppe. Drei Wrapping-Divs, die vorher nicht existierten, oder drei nach Divs, die vorher nicht existierten. Ich lasse dich entscheiden, was besser ist.

Probleme mit Schwimmern

Schwimmer werden oft geschlagen, weil sie zerbrechlich sind. Der größte Teil dieser Fragilität ist auf Fehler in IE6 und IE7 zurückzuführen. Wenn diese Browser in die Vergangenheit übergehen, verschwinden diese Fehler mit ihnen. Es lohnt sich jedoch, sie zu verstehen, wenn Sie jemals ein "OldIE" debuggen müssen.

  • Pushdown ist ein Symptom dafür, dass ein Element in einem schwebenden Element breiter ist als das Float selbst (normalerweise ein Bild). Die meisten Browser rendern das Bild außerhalb des Floats, aber das hervorstehende Teil wirkt sich nicht auf andere Layouts aus. In alten IE-Versionen wurde der Float so erweitert, dass er das Bild enthält, was sich häufig drastisch auf das Layout auswirkt. Ein häufiges Beispiel ist ein Bild, das aus dem Hauptinhalt herausragt und die Seitenleiste nach unten drückt.

    Schnellkorrektur: Stellen Sie sicher, dass Sie keine Bilder haben, die dies tun. Verwenden Sie diese Option overflow: hidden;, um überschüssige Bilder abzuschneiden.

  • Double Margin Bug - Eine andere Sache, die Sie beim Umgang mit IE 6 beachten sollten, ist, dass sich die Marge verdoppelt, wenn Sie einen Rand in die gleiche Richtung wie den Float anwenden. Schnellkorrektur: display: inlineStellen Sie den Float ein und machen Sie sich keine Sorgen, dass er ein Element auf Blockebene bleibt.
  • Beim 3px-Joggen wird Text, der sich neben einem schwebenden Element befindet, auf mysteriöse Weise von 3px weggeworfen wie ein seltsames Kraftfeld um den Schwimmer. Schnellkorrektur: Legen Sie eine Breite oder Höhe für den betroffenen Text fest.
  • In IE 7 war der Fehler am unteren Rand der Fall, wenn ein schwebender Elternteil schwebende Kinder darin hat, der untere Rand dieser Kinder vom Elternteil ignoriert wird. Schnellkorrektur: Verwenden Sie stattdessen die untere Polsterung des übergeordneten Elements.

Alternativen

Wenn Sie Text um Bilder wickeln müssen, gibt es wirklich keine Alternativen für float. Apropos, sehen Sie sich diese ziemlich clevere Technik an, um Text um unregelmäßige Formen zu wickeln. Aber für das Seitenlayout gibt es definitiv eine Auswahl. Eric Sol hat einen Artikel über A List Apart, Faux Absolute Positioning, der eine sehr interessante Technik beschreibt, die in vielerlei Hinsicht die Flexibilität von Schwimmern mit der Stärke der absoluten Positionierung kombiniert.

CSS3 behandelt das Seitenlayout auf verschiedene Arten:

  • Flexbox
  • Mehrspaltiges Layout
  • Gitterstruktur

Absolut positionierte Floats (z. B. Sie positionieren sich absolut normal, aber das Element kann immer noch andere Elemente beeinflussen, z. B. Textumbruch) wurden diskutiert, aber ich denke, die Idee wurde aufgrund von Ähnlichkeiten mit anderen robusteren Layout-Ideen zurückgestellt.

Video

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

verbunden

  • clear
  • position

Mehr Informationen

  • float in der W3C-Spezifikation
  • float bei MDN

Browser-Unterstützung

Chrom Safari Feuerfuchs Oper IE Android iOS
Alle Alle Alle Alle Alle Alle Alle