CSS-Floats in 5 Fragen erklärt

CSS "Floats" (Floating-Elemente) sind einfach zu verwenden, aber wenn sie einmal verwendet werden, wird der Effekt, den sie auf die umgebenden Elemente hat, manchmal unvorhersehbar. Wenn Sie jemals auf die Probleme gestoßen sind, in der Nähe von Elementen oder Schwimmern zu verschwinden, die sich wie ein Daumen herausstoßen, müssen Sie sich keine Sorgen mehr machen.

In diesem Beitrag werden fünf grundlegende Fragen behandelt, die Ihnen helfen, ein Experte für Floating-Elemente zu werden.

Welche Elemente schweben nicht??
Was passiert mit einem Element, wenn es schwimmt??
Was passiert mit den Geschwistern von "Floats"?
Was passiert mit einem Elternteil eines "Float"?
Wie können Sie "Floats" löschen??

Für Leser, die die TL? Dr-Herangehensweise an das Leben anpassen, gibt es eine Zusammenfassung am Ende des Beitrags.

1. Welche Elemente schweben nicht?

Ein absolut oder fest positioniertes Element wird nicht schweben Wenn Sie also das nächste Mal auf einen Float stoßen, der nicht funktioniert, prüfen Sie, ob der Float vorhanden ist Position: absolut oder Position: feststehend und Änderungen entsprechend anwenden.

2. Was passiert mit einem Element, wenn es schwimmt??

Wenn ein Element mit "Float" gekennzeichnet ist, wird es entweder nach links oder nach rechts verlaufen, bis es erscheint trifft die Wand seines Behälterelements. Alternativ läuft es bis es trifft ein anderes schwebendes Element, das bereits an derselben Wand gestoßen ist. Sie werden sich Seite an Seite stapeln, bis der Platz leer ist, und neuere eingehende werden nach unten verschoben.

Schwimmende Elemente auch geht nicht über die Elemente hinaus Vor es im Code etwas, das Sie vor der Codierung berücksichtigen müssen a “Schweben” nach dem ein Element, an dessen Seite Sie es schweben möchten.

Hier sind zwei weitere Dinge, die einem schwebenden Element passieren, abhängig davon, welcher Elementtyp schwebend gehalten wird:

(1) Ein Inline-Element wird zu einem Block-Level-Element wenn schwebte.

Immer wieder gewundert, warum Sie plötzlich einem Floating Höhe und Breite zuweisen können Spanne? Das liegt daran, dass alle Elemente bei Floating den Wert erhalten Block für seine Anzeige Attribut (Inline-Tisch wird bekommen Tabelle) Sie machen Block-Elemente.

(2) Ein Blockelement mit nicht angegebener Breite wird verkleinert, damit es beim Verschieben in den Inhalt passt.

Wenn Sie für ein Blockelement keine Breite angeben, ist die Breite normalerweise 100%. Aber wenn es schwimmt, ist das nicht mehr der Fall. Die Box des Blockelements wird verkleinert, bis der Inhalt sichtbar bleibt.

3. Was passiert mit den Geschwistern von "Floats"?

Wenn Sie sich entscheiden, ein Element zwischen einer Reihe von Elementen zu schweben, machen Sie sich keine Sorgen darüber, wie es sich verhalten wird. Das Verhalten ist vorhersehbar und bewegt sich entweder nach links oder nach rechts. Worüber Sie wirklich nachdenken sollten, ist wie sich die Geschwister danach verhalten werden.

"Floats" haben die liebevollsten und gehorsamsten späteren Geschwister auf der ganzen Welt. Sie werden alles in ihrer Macht Stehende tun, um ein schwebendes Element aufzunehmen.

Das Text- und Inline-Elemente wird einfach Platz für die "Floats" schaffen und den "Float" umgeben wenn es in Position ist.

Das Blockelemente wird noch einen Schritt weiter gehen und wird wickeln Sie sich um einen "Float" großzügig, auch wenn es bedeutet, ihre eigenen Kindselemente herauszuschmeißen, um Platz für den "Float" zu schaffen.

Lass uns das in einem Experiment überprüfen. Nachfolgend finden Sie eine blaue Box und danach eine rote Box gleicher Größe mit einigen untergeordneten Elementen.

Lassen Sie uns nun das blaue Kästchen schweben und sehen, was mit dem roten Kästchen und seinen Kindern geschieht.

Alles wird in Ordnung sein, sobald die rote Box die blaue Box nicht mehr umarmt Überlauf versteckt.

Wenn Sie hinzufügen Überlauf versteckt Bei einem Element, das einen Float umwickelt hat, hört es damit auf. Siehe unten, wie sich die rote Box verhält Überlauf versteckt.

4. Was passiert mit einem Elternteil eines "Float"?

Eltern interessieren sich nicht besonders für ihre "Float" -Kinder, es sei denn, sie sollten ihre linken oder rechten Grenzen nicht verlassen.

Normalerweise erhöht ein Blockelement mit nicht angegebener Höhe seine Höhe, um die untergeordneten Elemente aufzunehmen, nicht jedoch für Float-Kinder. Wenn die Größe eines Floats zunimmt, wird die Höhe des übergeordneten Elements nicht entsprechend erhöht. Dies kann wiederum durch die Verwendung von gelöst werden Überlauf versteckt im Elternteil.

5. So löschen Sie "Floats"?

Ich habe es schon erwähnt Überlauf versteckt Um ein übergeordnetes übergeordnetes Element für ein schwebendes Kind zu schaffen, während nach dem "Float" der richtige Platz für andere Elemente geschaffen wird, und um zu verhindern, dass Geschwister "Floats" einwickeln.

Und so lässt man ein Element in der Nähe eines "Float" ohne Kompromisse leben.

Es gibt eine andere Methode, bei der die Elemente nicht einmal in der Nähe ihrer "Float" -Geschwister sind. Mit der klar Attribut Sie können ein Element frei von einem "Float" machen.

klar: links; klar: richtig; Lösche beide;

links value löscht alle "Floats" links vom Element und umgekehrt Recht, und auf beiden Seiten für beide. Diese klar Das Attribut kann für ein Geschwister, ein leeres div oder ein Pseudo-Element verwendet werden, je nach Ihrem Komfort.

Zusammenfassung

Absolute / feste Elemente werden nicht verschoben.
Ein "Float" geht nicht über das Element hinaus Vor es im Code.
Wenn im Container nicht genügend Speicherplatz vorhanden ist, wird ein "Float" nach unten gedrückt.
Alle "Floats" werden zu Elementen auf Blockebene verarbeitet.
Wenn width für ein "Float" nicht angegeben ist, wird es auf den Inhalt verkleinert.
Die späteren Geschwister eines "Float" umgeben sie entweder (Inline & Text) oder wickeln sie ein (Blöcke)..
Um zu verhindern, dass ein Element einen "Float" umgibt, verwenden Sie Überlauf versteckt.
Die Eltern eines "Schwimmers" würden ihre Höhe nicht erhöhen, um in den Schwimmkörper zu passen.
Verwenden Sie, um die Höhe eines Elternteils gemäß "Float" zu erhöhen Überlauf versteckt (oder erstellen Sie ein leeres Geschwister mit klar Danach)
Um zu verhindern, dass sich ein Element in der Nähe von "Float" befindet, verwenden Sie die klar Attribut.