Warum hat CSS das Problem, Floats zu löschen?

Der Grund für das Problem beim Löschen von Floats in CSS: Im Standardablauf ist für das übergeordnete Element kein Höhenattribut festgelegt, und die untergeordneten Elemente im übergeordneten Element sind schwebend, da die Floating-Elemente nicht mehr die Position einnehmen Im ursprünglichen Dokumentfluss ist die Höhe der schwebenden Elemente nicht gleich. Sie wird in die Höhe des übergeordneten Elements eingerechnet, das heißt, sie wird reduziert angezeigt.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3, dieser Artikel gilt für alle Computermarken.

1. Warum gibt es ein Problem beim Löschen von Floats?

(Empfehlung für Lernvideos: Java-Video-Tutorial)

Wenn ein übergeordnetes Element im Standardfluss kein Höhenattribut festlegt, wird seine Höhe um die Höhe des untergeordneten Elements gestreckt, d. h. adaptiv. Wenn jedoch das untergeordnete Element in diesem übergeordneten Element schwebend ist, wird die Höhe des schwebenden Elements nicht anhand der Höhe des übergeordneten Elements berechnet, da das schwebende Element nicht mehr die Position des ursprünglichen Dokumentflusses einnimmt Das übergeordnete Element hat den Wert 0, d. h. es erscheint im reduzierten Status. Um dieses Problem zu lösen, haben wir vorgeschlagen, den Float zu löschen.

2. Wie lösche ich Floats mit CSS?

1. Höhe direkt zum übergeordneten Element hinzufügen

Aber es ist nicht anwendbar, wenn die Höhe des schwebenden Elements ungewiss ist

2. Direktes Hinzufügen eines Tags auf Blockebene (p, div.) ) am unteren Rand des übergeordneten Elements usw.) und geben Sie dann „clear: Both“ ein, um den Float zu löschen.

Aber dies erzeugt eine große Anzahl nutzloser leerer Elemente, verschwendet Ressourcen und ist nicht die optimale Lösung

3 Verwenden Sie BFC:

(1) Was ist BFC? Wörtlich übersetzt als „Formatierungskontext auf Blockebene“ . Es handelt sich um einen unabhängigen Rendering-Bereich und eine unabhängige Layoutumgebung, in der das Elementlayout nicht von der Außenwelt beeinflusst wird. In einem BFC werden Blockboxen und Linienboxen (Linienboxen bestehen aus allen Inline-Elementen in einer Reihe) vertikal angeordnet entlang der Grenze seines übergeordneten Elements. BFC ist ein isolierter unabhängiger Container auf der Seite. Die Unterelemente innerhalb des Containers haben keinen Einfluss auf die Elemente außerhalb. Und umgekehrt.

(2) Lösung 1:

Überlauf hinzufügen: versteckt (solange es nicht sichtbar ist) zum Stil des übergeordneten Elements. Nach dem Hinzufügen dieser Anweisung wird ein BFC erstellt, der das schwebende Element im BFC abfängt Verhindern Sie, dass es den Dokumentfluss verlässt. Berechnen Sie zunächst die Höhe des schwebenden Elements und verbergen Sie es. Wenn das übergeordnete Element die Höhe erhält, wird es geöffnet Fügen Sie zum übergeordneten Element (sofern es nicht keins ist) diese Anweisung hinzu. Es wird auch ein BFC erstellt. Das Prinzip ist das gleiche, aber manchmal müssen wir das übergeordnete Element nicht schweben lassen, was unseren Anforderungen widerspricht

4. Verwenden Sie Pseudoklassen

, um Brüder von Floating-Elementen über das Pseudoelement ::after des übergeordneten Elements zu generieren, und verwenden Sie dann die Methode clear:both für Geschwisterelemente.

Verwandte Empfehlungen:

CSS-Tutorial

Das obige ist der detaillierte Inhalt vonWarum hat CSS das Problem, Floats zu löschen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!