Was machen eigentlich Schwimmer eigentlich? Wie wirken sie sich auf das Boxmodell der beteiligten Elemente aus? Wie unterscheiden sich Floatelemente von Inlineelementen? Welche spezifischen Regeln gelten für die Position von Floated-Elementen? Wie funktioniert das klare Eigentum und wozu dient es?
Floats können selbst erfahrene Entwickler zum Absturz bringen, und wenn man ihr Verhalten versteht, kann man sich wirklich von den vielen Problemen lösen, denen man mit CSS begegnet. Selbst wenn Sie denken, dass Sie bereits alles über Floats wissen, tauchen wir so tief ein, dass Sie vielleicht etwas Neues lernen!
Was ist ein Schwimmer?
Einige Elemente in CSS sind Elemente auf Blockebene, dh sie beginnen automatisch mit einer neuen Zeile. Wenn Sie beispielsweise zwei Einzelwort-Absatzelemente erstellen, fließen sie nicht ineinander, sondern erscheinen in separaten Zeilen. Andere Elemente sind Inline-Elemente. Dies bedeutet, dass sie in einer Zeile erscheinen. mit dem vorherigen Inhalt. Ein Beispiel ist ein Anker-Tag, das in einem anderen Element wie einem Absatz erscheinen kann, ohne dass zusätzliche Leerzeichen oder neue Zeilen auftreten.
Eine Möglichkeit, dieses Modell des Layouts zu betrügen, ist die Verwendung von Floats, durch die ein bestimmtes Element auf eine Seite seiner Linie verschoben werden kann und der andere Inhalt auf seiner Seite fließen kann. Ein Element mit rechtsgeschwenktem Element wird ganz nach rechts von seinem Container geschoben und der Inhalt wird auf der linken Seite nach unten fließen. Ein Element nach links bewegt wird nach links geschoben und der Inhalt wird nach rechts geschoben.
Das klassische Beispiel ist, wenn Sie ein Bild mit einem Absatz werfen und möchten, dass die beiden nebeneinander und nicht gestapelt angezeigt werden. Zuerst erstellen wir beide Elemente mit etwas HTML:
Wenn dieser Code vorhanden ist, wird unser Bild auf der rechten Seite der Linie angezeigt, und der Absatz kann auf der linken Seite nach unten fließen. Klicken Sie hier oder auf das Bild unten, um ein Live-Beispiel für diesen Code in Aktion zu sehen und anzupassen.
Eine interessante Sache über das Verhalten dieses Bildes, jetzt, da es schwebend ist, ist, dass unsere anderen Inhalte tatsächlich versuchen, das Bild so weit wie möglich zu umschließen. Wenn wir die Größe unseres Containers oder Browser-Fensters verkleinern, wird der Text einfach neu eingeflößt, so dass er niemals das Bild berührt.
Wie funktioniert die Box?
Wahrscheinlich haben Sie dieses Verhalten bereits in einem anständigen Maße verstanden. Um Schwebekörper richtig einsetzen zu können, müssen Sie jedoch verstehen, wie diese beiden Elemente auf tieferer Ebene interagieren. Wie fügen wir beispielsweise einen zusätzlichen Rand zwischen dem Absatz und dem Bild hinzu? Sie denken vielleicht, dass dies funktionieren wird:
Dadurch wird jedoch nicht einmal ein Pixel zusätzlichen Abstand zwischen dem Bild und dem Absatz eingefügt. Stattdessen müssen wir unseren Rand auf das Bild anwenden:
Die Frage, die Sie sich stellen sollten, lautet: Warum? Warum vergrößert der Absatzrand nicht den Abstand zwischen dem Bild und dem Absatz? Der Grund ist, dass wir das Boxmodell nicht so verstehen, wie es zu diesem Absatz gehört.
Wenn Sie immer Zweifel haben, ob Ihr Layout auf einer grundlegenden Ebene funktioniert, versuchen Sie, ein oder zwei Ränder anzuwenden, um zu sehen, was los ist. Wenn wir diese Technik für den Absatz verwenden, kann Sie das Ergebnis überraschen.
Wie Sie sehen, befindet sich das Bild tatsächlich in der Box des Absatzes! Dies löst unser Randrätsel. Jeder Rand, den wir dem Absatz hinzufügen, wird rechts neben dem Bild angewendet. Aus diesem Grund wird der Abstand zwischen dem Bild und dem Absatz nicht vergrößert.
Wenn wir möchten, dass das Verhalten so geändert wird, dass der Absatz nicht um das Bild verläuft, können Sie den Absatz nach links verschieben und ihm eine bestimmte Breite zuweisen (ohne die Breite auszudrücken, ist der Absatz 100% breit und passt nicht neben dem Bild).
Crazy Float-Regeln
Jetzt wissen wir, was ein Float ist und wie er sich auf die Boxen der beteiligten Elemente auswirkt. Lassen Sie uns zu einer anderen Information übergehen, die viele Entwickler wahrscheinlich nicht im geringsten verstehen: die Regeln, die die Position eines Floated-Elements bestimmen.
Häufig verwenden Entwickler Floats, um die Positionierung von Listenelementen zu steuern, beispielsweise in einer Bildergalerie oder in einer Feature-Liste. Lassen Sie uns sehen, wie dies funktioniert, indem Sie eine einfache Liste mit Bildern erstellen.
Zunächst einmal unterscheidet sich dieses Beispiel dadurch, dass die Bilder standardmäßig so eingestellt sind, dass sie entlang ihrer unteren Kanten vertikal ausgerichtet sind. Dadurch sehen sie deutlich anders aus als in unserem vorherigen Beispiel, aber wir können dies mit einer einzigen Zeile CSS beheben.
Jetzt fangen wir an, dem Float-Beispiel sehr ähnlich zu sein. Nur das Anzeigen der Listenelemente inline hat eine viel vorhersehbare Stapelreihenfolge. Wenn auf der X-Achse kein Platz für das nächste Element vorhanden ist, beginnt es wieder auf der linken Seite in der nächsten Zeile.
Warum funktioniert unsere schwebende Bildergalerie nicht so? Welches merkwürdige Voodoo regelt schwebende Gegenstände?
Übersetzung erforderlich
Es stellt sich heraus, dass die CSS-Spezifikation eine Liste von neun Regeln enthält, die das Verhalten von Floats bestimmen. Das Problem mit dieser Liste ist jedoch, dass sie so geschrieben wurde, dass nur Anwälte und andere langweilige Menschen sie verstehen können. Hier ist ein direktes Zitat aus einer der Regeln:
Wenn das aktuelle Feld linksbeweglich ist und wenn von Feldern, die zuvor im Quelldokument erstellt wurden, linksgängige Felder vorhanden sind, muss sich für jedes dieser früheren Feld entweder der linke äußere Rand des aktuellen Felds rechts von dem befinden der rechte äußere Rand des früheren Kastens oder dessen oberer Rand muss niedriger sein als der untere Rand des früheren Kastens. Analoge Regeln gelten für rechtsschwebende Boxen.Vielleicht ist Ihr Leseverständnis höher als bei mir, aber diese und die anderen Regeln in der Liste ließen meinen Kopf drehen. Alle diese Gerüchte, dass die linke Außenkante rechts von der rechten Außenkante liegt, sind eigentlich ziemlich einfach, kompliziert gekleidet. Um es einfacher zu machen, hier sind die neun Regeln von Josh Johnson für das Verhalten von Schwimmern, die für Ihre Bequemlichkeit ins Englische übersetzt wurden.
- Schwimmende Elemente werden nicht weiter an den Rand ihrer Behälter gedrückt.
- Jedes schwebende Element wird entweder neben oder unter einem vorherigen schwebenden Element angezeigt. Wenn die Elemente nach links verschoben werden, wird das zweite Element rechts vom ersten Element angezeigt. Wenn sie nach rechts verschoben werden, erscheint das zweite Element links vom ersten.
- Eine linksgleitende Box kann nicht weiter rechts sein als eine rechtsgleitende Box.
- Floated-Elemente können nicht höher als die Oberkante des Containers sein (dies wird komplizierter, wenn Ränder eingeblendet werden, siehe Originalregel).
- Ein Floated-Element kann nicht höher sein als eine vorherige Blockebene oder ein Floated-Element.
- Ein Floated-Element kann nicht höher sein als eine vorherige Zeile von Inline-Elementen.
- Ein schwimmendes Element neben einem anderen schwimmenden Element kann nicht über den Rand des Containers hinausragen.
- Eine Schwimmbox muss so hoch wie möglich platziert werden. (Keine Übersetzung erforderlich)
- Eine links schwebende Box muss so weit wie möglich nach links und eine rechts schwebende Box so weit wie möglich nach rechts gestellt werden. Eine höhere Position wird gegenüber einer Position bevorzugt, die sich weiter links / rechts befindet. (Keine Übersetzung erforderlich)
Hier können wir sehen, dass viele davon ziemlich vernünftig sind, aber sie müssen explizit angegeben werden, damit sich jede Person und jeder Browser auf derselben Seite befindet. Grundsätzlich besteht der Kern der Situation darin, dass schwebende Elemente bis zur angegebenen Kante (links oder rechts) gehen, jedoch nicht weiter. Es sei denn, es ist natürlich ein anderes Float-Element vor ihm, in dem Fall geht es einfach neben dieses Element.
Die eigentliche Überraschung, die uns zuvor verwirrt hat, steckt am Ende in den Regeln, die besagen, dass schwebende Elemente versuchen, so hoch wie möglich zu bleiben, und dass diese vertikale Positionsregel Vorrang vor der horizontalen links / rechts-Gleitregel hat, die ein Element an eine Kante drückt .
In unserem vorherigen Beispiel streckte Bild Nummer zwei die Höhe der Linie nach unten, so dass nach Bild Nummer drei noch ein gewisser vertikaler Raum für Bild Nummer vier vorhanden war, in den er sich einpressen konnte. Trotz dieser Regeln ist das Muster nicht immer leicht vorhersagbar.
Denken Sie daran, dass, wenn Sie ein schwebendes Element haben, Die nächsten schwebenden Elemente dahinter benötigen mindestens den gleichen vertikalen Abstand oder mehr bevor Sie die Leitung brechen und im Fluss nach unten gehen.
Float Order
Ein letzter Hinweis zu den Regeln, die wir hier aufgestellt haben. Die zweite Regel hat einige interessante Auswirkungen auf die Reihenfolge der Elemente, die verschoben werden. Nehmen wir an, wir haben wieder eine Liste von Bildern, die von eins bis sechs nummeriert sind.
Dieser Code teilt dem Browser mit, dass sich der obere Teil des zweiten Listenelements unter dem unteren Rand aller links beweglichen Elemente (d. H. Des ersten Listenelements) befinden muss. Wenn wir alle diese Elemente nach rechts geschoben hätten, hätten wir sie verwenden müssen klar: richtig? stattdessen.
Beachten Sie, dass danach der Rest der Floated-Items ihren Kurs beibehält. Das liegt daran, dass sie immer noch auf links schweben, die klare Eigenschaft hebt dies jedoch nicht irgendwie auf. Das bedeutet, dass unser Problem mit dem Absatz nicht durch Löschen aller Listenelemente behoben wird.
Stattdessen muss das Absatzelement, das ein Block-Level-Element ist, das nicht verschoben wurde, gelöscht werden. Dadurch wird sichergestellt, dass es unter den schwebenden Elementen und nicht neben ihnen angezeigt wird.
Technisch brauchten wir hier nur ein Link, aber wenn ein Entwickler sicher sein will, dass alle Floats gelöscht werden, ist es üblich, das zu sehen beide verwendeter Wert. Diese Änderung hat unser Problem gut gelöst!
Float-Quirks und Korrekturen
Es gibt eine besondere Aktion, die ausgeführt wird, wenn ein bestimmtes Element nur Elemente mit Fließkommazahl enthält: Die Höhe des übergeordneten Elements wird reduziert. Um dies zu veranschaulichen, möchten wir sagen, wir wollten eine Hintergrundfarbe auf die ungeordnete Liste setzen, die wir in allen unseren Beispielen verwenden. Wenn die Elemente in der Liste nicht verschoben werden, müssen wir die Farbe nur mit CSS auf den Hintergrund anwenden.
Wie Sie im folgenden Beispiel sehen können, wurde das Feld, in dem die ungeordnete Liste definiert ist, grau dargestellt, und die darin enthaltenen Listenelemente sind übereinander angeordnet.
Das zweite, bei dem wir diese Listenelemente schweben lassen, das UL enthält nur schwebende Elemente, und so bricht die Höhe zusammen, so dass ein Neuling die Frage stellt, was mit seiner Hintergrundfarbe geschehen ist.
Es gibt verschiedene Möglichkeiten, dieses Problem zu lösen. Die einfachste und einfachste Lösung ist, dem übergeordneten Element, der ungeordneten Liste, eine explizite Höhe zuzuweisen.
Wie Sie sehen, hat uns dies tatsächlich zu unserem Hintergrund zurückgeführt. Dies ist jedoch selten der erstrebenswerte Kurs, nur weil dies auf lange Sicht bequemer ist, wenn die Höhe automatisch anhand des Inhalts berechnet wird. Wenn wir jetzt drei weitere Bildzeilen zu unserer Liste hinzufügen, ist diese Höhe nicht ausreichend.
Clearfix zur Rettung
Hier ist der Begriff "clear fix". auch geschrieben? clearfix? kommt ins Spiel. Clearfixes adressieren dieses Problem der Absturzhöhe normalerweise durch die Verwendung von klar Eigentum.
Bisher haben Entwickler ein leeres Element (oft ein div) in ihrem HTML-Code auf derselben Ebene wie die floated-Elemente erstellt und dann eine Klasse von? Clearfix? Angewendet. zu diesem leeren Behälter. Zurück in CSS würden Sie dann die Floats auf der Seite löschen. Eigentum.
Dies behebt sofort das Problem der eingestürzten Höhe:
Wenn wir wissen, was wir bereits gelernt haben, wissen wir genau, warum dieser Trick unser Problem gelöst hat. Der Grund, warum die Höhe zusammengebrochen war, liegt darin, dass das übergeordnete Element nur schwebende Kinder enthielt. Jetzt hat es ein Kind, wenn auch ein leeres, das nicht schwebend ist. Die automatische Höhe funktioniert also wieder wie erwartet.
Das Problem bei dieser Methode ist, dass niemand dieses besonders hässliche Element im HTML-Code mochte. Es war einfach nicht semantisch, was bedeutete, dass es nicht half, die klare Hierarchie der Seite zu kommunizieren.
Die neue, ausgefallene Lösung für dieses Problem besteht darin, die Überlauf Eine Eigenschaft, die die Funktionalität von Inhalten regelt, die über die Grenzen der enthaltenen Box hinausgehen. Es stellt sich heraus, dass, wenn Sie Überlauf auf einstellen versteckt oder Auto Auf dem übergeordneten Artikel wird der Höhenzusammenbruch behoben!
Dies ist definitiv die kürzeste und eleganteste Lösung zur Behebung des Problems der Einsturzhöhe und sollte Ihre Strategie sein. Allerdings gibt es Fälle, in denen der Überlauf eines Elements auf gesetzt werden soll sichtbar, was solltest du dann tun?
Die Antwort ist, Nick Gallaghers Micro Clearfix Hack zu verwenden, der einiges geniales CSS verwendet, um dieses Problem zu beheben. Erstens verwendet es: before und: after, um Inhalte hinzuzufügen, mit denen wir im übergeordneten Element etwas erstellen können, das nicht schwebend ist. Sie möchten jedoch wirklich keinen Inhalt hier haben, also lassen wir ihn leer, setzen die Anzeige jedoch auf table, um eine anonyme Zelle zu erstellen (leer und nimmt keinen Platz ein), und verwenden Sie schließlich unseren alten Freund. Dadurch wird der unsichtbare Blockebeneneintrag erstellt, den wir zum Korrigieren der Höhe ohne zusätzliche HTML-Markierung benötigen. Ältere Versionen von IE erfordern ein eigenes Update, sodass auch dieses Problem behoben wird.
Fazit
In diesem Artikel haben wir eine Tonne von großartigen Informationen, sowohl grundlegend als auch kompliziert. Wir haben mit einer Diskussion darüber begonnen, wie die Floats sind und wie sie auf einer grundlegenden Ebene funktionieren, und dann darüber, wie das Festlegen eines Elements zum Floaten die angrenzenden Boxen der beteiligten Elemente beeinflusst, so dass Sie richtig herausfinden können, wie Ihre Margen funktionieren du willst sie.
Als Nächstes gingen wir auf die Grundregeln über die Position eines Floated-Elements ein und kamen zu einigen interessanten Schlussfolgerungen, wie Floating-Elemente mit unterschiedlichen Höhen positioniert werden und wie rechte Float-Elemente in umgekehrter Reihenfolge erscheinen.
Schließlich haben wir die gesamte Geschichte klar dargelegt, wie ein Elternteil, das nur schwebende Kinder enthält, eine eingestürzte Höhe hat und wie Sie diese je nach Szenario lösen können.
Wenn Sie vor dem Lesen dieses Artikels verwirrt wurden, schließen Sie sich dem Club an. Sie verwirren uns zunächst alle. Hoffentlich haben Sie jetzt ein hervorragendes Wissen darüber, wie Floats funktionieren und wie Sie sie verwenden können, um ein beliebiges Layout zu erreichen. Hinterlassen Sie einen Kommentar und lassen Sie uns wissen, ob Sie diese Informationen hilfreich fanden.