Welche Methoden gibt es, Floats zu löschen?-CSS-Tutorial-php.cn

Welche Methoden gibt es, Floats zu löschen?

清浅

Freigeben： 2018-12-17 09:17:04

Original

60015 Leute haben es durchsucht

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>

Nach dem Login kopieren

Rendering:

Welche Methoden gibt es, Floats zu löschen?

Nach dem Hinzufügen von float:left kann das übergeordnete Element nicht geöffnet werden

Welche Methoden gibt es, Floats zu löschen?

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>

Nach dem Login kopieren

(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;
    }

Nach dem Login kopieren

(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}

Nach dem Login kopieren

(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;
}

Nach dem Login kopieren

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!