So implementieren Sie den Zeilenumbruch schwebender Elemente in CSS

In diesem Artikel erfahren Sie, wie Sie den Zeilenumbruch mit schwebenden Elementen in CSS implementieren. Ich hoffe, dass er für Freunde hilfreich ist.

Wenn Sie diesen Layouteffekt erstellen möchten

Der Inhalt in Das lila Kästchen sieht so aus

Es ist eine Liste

Das li-Element ist ein Element auf Blockebene. Die Standardgröße ist die Breite des übergeordneten Elements ul und der Zeilenumbrüche

Wenn li keinen Hintergrund hat, machen Sie sich darüber keine Sorgen.

Aber hier liegt das Problem. Es hat nicht nur einen Hintergrund, sondern auch eine adaptive Breite und Höhe basierend auf dem Text

Dies ist die Funktion des Inline-Block-Typs

Wenn Sie möchten, dass li ein Inline-Block ist, setzen Sie float, um unsichtbare Änderungen vorzunehmen

Wenn es jedoch floatet, wird dies nicht der Fall sein wrap.

Das Problem ist wieder da

Es ist in Ordnung, li folat:left zu geben und dann einfach die Floats in clear:both zu löschen

Es gibt insgesamt vier Attribute Löschen Sie die Schwimmer

clear:both|left|right|none;

Ich habe alles getestet

Stellen Sie zunächst das rechte clear:right ein box1, um den Zweck zu erreichen, nicht in derselben Zeile zu sein

Hmm, Warum haben Sie nicht den gewünschten Effekt erzielt? ?

Dann setzen wir das zweite Element box2 auf clear:left; und sehen das Ergebnis

Nun, Box1 und Box2 befinden sich nicht mehr in derselben Zeile und der Zweck wurde erreicht

Warum funktioniert es dann nicht, wenn Box1 „clear:right“ setzt?

Weil Box1 das nur kann Ändere seine Position, so dass es keine klaren:rechten Elemente gibt

Genau wie im Leben kannst du andere nicht ändern, aber du kannst dich selbst ändern

Aber selbst wenn Box1 sich ändert Seine Position, Box2 folgt immer noch Box1, da sich schwebende Elemente außerhalb des Dokuments befinden und solche, die aus dem Dokumentfluss ausbrechen Element wird zu einem speziellen Inline-Block-Typ

, es hat Breite und Höhe und wird nicht umbrochen. Die Kombination aus Inline- und Blockfunktionen ist sehr gut

Hier Box1, auch wenn der richtige Float vorhanden ist Wenn Box2 gelöscht ist, folgt Box1, Box2, Box3 immer noch in einer Zeile. Vielleicht möchten Sie, dass Box1 zur nächsten Zeile läuft und Box2, Box3, nicht bewegt Funktioniert nicht. Sie sind nicht float:none. In html werden box1, box2 und box3 nacheinander erstellt Du positionierst dich? ? Blinder TM-Lauf

aber Box2 löscht den linken Float und umbricht die Zeile, indem sie ihre Position ändert

Die Reihenfolge ist immer noch dieselbe Box1 Box2 Box 3

Box3 folgt Box2, die bestätigt, was zuvor gesagt wurde

Durch dieses Verständnis habe ich ein tiefes Verständnis für Floating

Sie setzen also alle Elemente, die verpackt werden müssen, auf „clear:both“

Nein Problem überhaupt

Wenn die linke Seite nicht funktioniert, funktioniert die rechte Seite auch nicht, dann verlassen Sie sich auf das nächste Element

Empfohlene verwandte Artikel:

Was ist Float? Das Prinzip des CSS-Clearings Float

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den Zeilenumbruch schwebender Elemente in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!