CSS Floats durch Fahrt auf einer Rolltreppe erklärt

Wenn Sie jemals auf eine Rolltreppe gesprungen sind, können Sie Schwimmer schnell verstehen.

Dein

ist fast perfekt. Sie beschließen, einige Floats einzuführen, um die Beziehung zwischen einigen Elementen zu korrigieren.

Das nächste, was Sie wissen, sind Ihre neu schwebenden Elemente, die aus Ihrer sorgfältig gewählten Reihenfolge herausspringen und wie ein Magnet an der Seite Ihrer Div kleben. Der Ausdruck "unbeabsichtigtes Verhalten" kommt in den Sinn.

Ich habe persönlich stundenlang versucht, Schwimmer zu verstehen. Ich las einen Artikel und sagte: "Oh, das macht Sinn!" Dann kehrte ich zu meinem Code zurück, probierte ihn aus und… scheiterte. Zurück zum Zeichenbrett.

Ich werde mein Bestes geben, um Ihnen dieses Schicksal zu ersparen.

Floats erzeugen alternative Flüsse. Dies ist der schwierigste Teil zu verstehen. Sobald Sie sie eingeführt haben, müssen Sie Ihren Code so schreiben, dass er bis zu drei Flüsse umfasst: normal, links und rechts. Dies ist ein völlig neuer Satz von Regeln, im Gegensatz zur Manipulation der Breite von Elementen oder ihrer Positionierung.

Tatsächlich sind Schwimmer der Dynamik einer Fahrtreppe ziemlich ähnlich, und ich werde zeigen, wie sie zusammen mit der Eigenschaft clear verwendet werden können, um kristallklare Beziehungen innerhalb von divs herzustellen. Auf diese Weise werden Sie beim nächsten Versuch, Floats in Ihrem Code zu verwenden, keine Überraschungen erleben.

Ich muss die Fahrspur respektieren

Der Standardfluss der Elemente ist ähnlich wie in der Abbildung oben. Ein Typ steht in der Mitte mit der Hand am Geländer. Er quält die gesamte Rolltreppe. Niemand kann ihn überholen. Wirklich, ziemlich schlechte Rolltreppen-Etikette.

Er steht hinter einer Gruppe anderer Leute, die das Gleiche tun, damit auch niemand an ihnen vorbeikommt. Es gibt kein Konzept von Fahrspuren oder grundlegendem menschlichen Anstand.

Dies ist das Szenario, wenn Sie keine Floats verwenden.

Also gut, jetzt reden wir! Menschen mit einem gewissen Bekanntheitsgrad. Ich liebe es, das zu sehen.

Wir haben eine Spur links und eine andere Spur rechts. Andere Personen können sich problemlos um die beiden stillstehenden Personen bewegen und die Rolltreppe schneller hinaufsteigen, wenn sie dies wünschen. Niemand blockiert den Fluss, indem er in der Mitte steht.

Dies ist das Szenario, wenn Sie Schwimmer in Ihrem div verwenden. Es gibt einen linken Fluss und einen rechten Fluss, und die Elemente, die nicht schwebend sind, können leicht den Raum ausfüllen, der nicht von den schwebenden Elementen eingenommen wird.

Schwimmer: Links und rechts

Durch die Verwendung von Floats können bis zu zwei neue Flüsse eingeführt werden: left und right.

Dies ermöglicht dem normalen Fluss von Elementen, jenen ohne Float-Wert, die Räume um diese Elemente herum auszufüllen.

Mit Floats können Sie diese neuen Beziehungen zwischen Flows erstellen.

Wenn Sie eine Reihe von Personen in der Mitte des Aufzugs hätten, hätten Sie nur begrenzte Möglichkeiten für neue Strukturen. Wenn Sie jedoch eine linke und eine rechte Spalte haben, können Sie plötzlich festlegen, dass bestimmte Personen rechts stehen, andere links bleiben und eine andere Gruppe die Lücken füllen kann.

Auf diese Weise können Sie besser lesbaren und verständlicheren Code erstellen, da die float -Eigenschaft auch einen Hinweis auf die Beziehung eines Elements zu den umgebenden Elementen gibt.

Die Clear-Eigenschaft

Es gibt noch eine Falte, die wir noch nicht besprochen haben: die klare Eigenschaft. Mit „Clear“ können Elemente angeben, wo sie im Vergleich zu den schwebenden Elementen ausgerichtet werden sollen.

Auf dem ersten Bild des Abschnitts „Floats“ standen die beiden Rolltreppenfahrer höflich auf beiden Seiten der Rolltreppe. Dies ermöglicht es anderen, sie zu passieren und sich frei zu bewegen, wie sie es wünschen.

Nehmen wir an, wir hatten statt eines linken und eines rechten Elements drei linke und eines rechts davon schwebende Elemente. Die drei links schwebenden Elemente würden sich in einer Zeile auf der linken Seite stapeln, wenn wir ihnen auch die Eigenschaft "clear: left" geben. Wenn sie jedoch horizontal auf das schwebende rechte Element ausgerichtet sind, kann dies den normalen Fluss von Elementen sehr erschweren oder sogar unmöglich machen:

"Clear: left" weist jede links schwebende Person an, sich hinter dem ersten links schwebenden Element auszurichten. Abhängig von der Größe der unteren beiden Personen kann es für normale Elemente schwierig sein, sich durch den Raum oben rechts zu quetschen und ihn zu besetzen. So können auch gute Rolltreppenpraktiken noch zu Verstopfungen führen.

Eine der häufigsten Verwendungen der Eigenschaft clear ist „clear: both“. Auf diese Weise können Sie den Fluss der Elemente zurücksetzen, anstatt weiterhin einen rechten, linken und normalen Fluss aufrechtzuerhalten. Es ist ein bisschen wie der Typ auf der Rolltreppe, der den ganzen Raum einnimmt, weil er seinen Koffer mitgebracht hat.

Bei "clear: both" spielt es keine Rolle, wo dieser eine Kerl in der Orientierung zu seinem Koffer steht. Es ist egal, wer links oder rechts über ihm steht. Er blockiert immer noch die gesamte Rolltreppe. Menschen, die nach ihm vorankommen, müssen einen neuen Fluss von Elementen starten, der einen der drei Flüsse umfassen kann: links, rechts oder normal.

Er ist dem Drei-Flüsse-System entkommen und hat die Regeln zurückgesetzt. Schlecht für Leute, die die Rolltreppe hochfahren wollen? Sicher. Aber es ist gut, wenn Sie verhindern möchten, dass jemand vergeht.

Beachten Sie, dass dies anders ist als der Herr am Anfang, der in der Mitte der Rolltreppe stand, hinter einer Reihe von Leuten, die dasselbe taten. Das war ein One-Flow-System. "Clear: both" erkennt an, dass es bis zu drei Flüsse geben kann, und blockiert den Durchgang aller folgenden Elemente.

Wenn Ihnen dieser Beitrag gefallen hat, können Sie auch meine anderen Erklärungen zu herausfordernden CSS- und JavaScript-Themen wie Positionierung, Model-View-Controller und Rückrufe genießen.

Und wenn Sie der Meinung sind, dass dies anderen Menschen in Ihrer Position helfen könnte, geben Sie ihm ein „Herz“!

Dieser Beitrag erschien ursprünglich im CodeAnalogies-Blog.