Eine kurze Einführung in schwebende Eigenschaften in CSS

Um das FloatFloating-Attribut von CSS einzuführen, müssen Sie zunächst den Standarddokumentfluss

Standarddokumentfluss verstehen :

Ohne den Eingriff von CSS belegen Elemente auf Blockebene eine Zeile. Sie können die Breite und Höhe festlegen und die Inline-Elemente nebeneinander sowie die Breite anzeigen und Höhe werden automatisch ausgefüllt.

Der Standarddokumentfluss (Standardlayout) von HTML-Seiten ist: von oben nach unten, von links nach rechts, mit Zeilenumbrüchen beim Auftreffen auf Blöcke (Elemente auf Blockebene).

Die anfängliche Verwendung des Float-Attributs bestand darin, den Zielinhalt mit Text zu umschließen, was häufig in Zeitungen vorkommt. Später wurde es hauptsächlich verwendet, um die horizontale Anordnung von Inhalten nebeneinander zu erreichen Seite. ,

Schwebende Ebene: Nachdem dem Float-Attribut des Elements ein Wert zugewiesen wurde, wird es vom Dokumentfluss getrennt und schwebt nach links und rechts, nahe am linken und rechten Rand des übergeordneten Elements (Standard ist der Textkörperbereich).

Float-Attribut-Einführung:

links: Das Element schwebt nach links.

rechts: Das Element schwebt nach rechts.

Eigenschaften von Floating:

[1] Die schwebende untergeordnete Ebene führt dazu, dass die Höhe der übergeordneten Ebene zusammenbricht. Lösung: 1. Hinzufügen wieder auf die übergeordnete Ebene A Höhe 2. Verwenden Sie Überlauf: versteckt

[2] Floating Wrapping:

Blockebenenelement: wird in den Inhaltsbereich eingebunden und belegt nicht mehr eine ganze Zeile, hat aber immer noch die gleiche Länge wie der Inhalt und der Körper ist immer noch ein Blockebenenelement; >

Inline-Elemente: Nach dem Festlegen des Floats wird das Attribut

display geändert, sodass es zu einem Element auf Blockebene wird und Breite und Höhe festgelegt werden können.

【3】Schwimmende Elemente passieren den

Polsterbereich nicht

【4】Schwimmende Elemente verlassen den Der Dokumentfluss wirkt sich auf andere Elemente aus.

Das obige ist der detaillierte Inhalt vonEine kurze Einführung in schwebende Eigenschaften in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!