So löschen Sie Float in CSS

So löschen Sie Floating in CSS: 1. Fügen Sie nach dem Floating-Code ein leeres div-Tag mit dem Stilsatz „clear: Both“ hinzu. 2. Fügen Sie dem übergeordneten Element ein After-Pseudoelement mit dem Stil „clear:both;“ hinzu. 3. Legen Sie den Stil „overflow: auto“ auf das übergeordnete Element fest.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Wenn wir Code schreiben, können einige Elemente auf der Seite aufgrund der Verwendung von Float-Elementen manchmal nicht korrekt angezeigt werden.

Nach der Verwendung von Float-Floating-Elementen treten jedoch einige negative Auswirkungen auf:

(1) Da sich das Floating-Element außerhalb des Dokumentflusses befindet, kann die Höhe des übergeordneten Elements nicht erweitert werden, was sich auf Elemente auf derselben Ebene auswirkt das übergeordnete Element
(2) Nicht schwebende Elemente auf derselben Ebene wie das schwebende Element folgen, da das schwebende Element den Dokumentenfluss verlässt und nicht seine ursprüngliche Position einnimmt
(3) Wenn das schwebende Element nicht das erste schwebende Element ist Element, die Elemente davor müssen auch schweben, sonst wird es leicht die strukturelle Anzeige der Seite beeinträchtigen. Zu diesem Zeitpunkt müssen Sie den Float löschen. Hier sind einige CSS-Methoden, um den Float zu löschen.

(1) Verwenden Sie „clear:both“, um Floats zu löschen.

Fügen Sie ein leeres div-Tag in den Code ein und setzen Sie dann „clear:both“ auf dieses Tag, um die Auswirkungen von Floats auf der Seite zu löschen. Seine Vorteile sind Einfachheit, Bequemlichkeit und gute Kompatibilität. Es wird jedoch im Allgemeinen nicht empfohlen, diese Methode zu verwenden, da sie zu struktureller Verwirrung führt und einer späteren Wartung nicht förderlich ist. (2) Verwenden Sie das Pseudoelement Clearfix, um den Float zu löschen

zum übergeordneten Element Das Ebenenelement fügt ein :after-Pseudoelement hinzu, um die Höhe des übergeordneten Elements zu unterstützen, indem der Float des Pseudoelements gelöscht wird

<div style="clear: both"></div>

(3) Verwenden Sie das Überlaufattribut von CSS

Bei der Einstellung Der Überlaufstil für das übergeordnete Element kann den Float löschen, unabhängig davon, ob overflow:hidden oder overflow:auto im Wesentlichen einen BFC erstellt, der die Höhe des übergeordneten Elements unterstützt element

.clearfix:after{
    content:"";
    display:block;
    visibility:hidden;
    clear:both;
    }

(Lernvideo-Sharing: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo löschen Sie Float in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!