Heim >Web-Frontend >CSS-Tutorial >Welche Methoden gibt es, Floats zu löschen?
Zu den Methoden zum Löschen von Floats gehören Clearboth, das Festlegen von Clearfix, Overflow und das Festlegen doppelter Pseudoelemente für das übergeordnete Element.
Wenn wir Code schreiben, manchmal aufgrund der Verwendung von Float Elemente, einige Elemente auf der Seite können nicht korrekt angezeigt werden. Im folgenden Artikel werden wir verschiedene Methoden zum Löschen von Floats im Detail vorstellen. Es hat einen bestimmten Referenzwert und ich hoffe, dass es für alle hilfreich ist.
[Empfohlene Kurse: CSS-Kurs]
Floating Die Konsequenzen:
(1) Da sich das schwebende Element außerhalb des Dokumentflusses befindet, kann die Höhe des übergeordneten Elements nicht erweitert werden, was sich auf Elemente auf derselben Ebene wie das übergeordnete Element auswirkt
( 2) und nicht schwebende Elemente auf derselben Ebene des schwebenden Elements folgen ihm, da das schwebende Element den Dokumentfluss verlässt und nicht seine ursprüngliche Position einnimmt
(3) Wenn das schwebende Element nicht das erste schwebende Element ist , die Elemente davor müssen ebenfalls schwebend sein, sonst wird es leicht die strukturelle Anzeige der Seite beeinflussen
Beispiel: Legen Sie drei Divs in einem Div fest und lassen Sie die drei Divs das übergeordnete Element erweitern
<style>
.box{border:1px solid #ccc;background:pink;}
.red{width:100px;height:100px;background: red;}
.green{width:100px;height:100px;background:green;}
.blue{width:100px;height:100px;background: blue;}
</style>
<body>
<div class="box">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div> Rendering:
Nach dem Hinzufügen von float:left kann das übergeordnete Element nicht geöffnet werden
So löschen Sie Float
(1) Verwenden Sie clear:both, um Floats zu löschen
Fügen Sie ein leeres div-Tag in den Code ein und legen Sie es fest clear:both zu diesem Tag hinzufügen, um die Auswirkung 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 strukturelle Verwirrung verursacht und der späteren Wartung nicht förderlich ist
<div style="clear: both"></div>
(2) Pseudoelement verwenden Clearfix zum Löschen von Floating
fügt dem übergeordneten Element ein :after-Pseudoelement hinzu. Durch das Löschen des Floatings des Pseudoelements wird der Zweck erreicht, die Höhe des übergeordneten Elements
zu unterstützen.clearfix:after{
content:"";
display:block;
visibility:hidden;
clear:both;
}(3) Verwendung der Überlaufmethode
Wenn der Überlaufstil für das übergeordnete Element festgelegt ist, egal ob overflow:hidden oder overflow:auto, kann der Float gelöscht werden Solange sein Wert nicht sichtbar ist, wurde ein BFC erstellt, um den Effekt der Unterstützung der Höhe des übergeordneten Elements zu erzielen
.box{border:1px solid #ccc;background:#eff2f4;overflow: auto} (4) Verwendung der Doppel-Pseudoelement-Methode
durch Angabe des übergeordneten Elements Richten Sie doppelte Pseudoelemente ein, um den Effekt des Löschens von Floats zu erzielen
.clearfix:before,.clearfix:after {
content: "";
display: block;
clear: both;
}Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, den ich hoffe In diesem Artikel kann jeder die Methode zum Löschen von Floats verstehen
Das obige ist der detaillierte Inhalt vonWelche Methoden gibt es, Floats zu löschen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!