Zusammenfassung der Methoden zum Löschen von CSS-Floats

Dieser Artikel stellt hauptsächlich eine Zusammenfassung von drei Methoden zum Löschen von CSS-Floating vor. Jetzt werde ich es mit Ihnen teilen und als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

1. Warum schweben wir?

Warum wir schweben, warum wir Schwimmer beseitigen müssen und wie wir Schwimmer beseitigen können. Beim Layouten einer Webseite müssen Elemente manchmal nebeneinander angezeigt werden. Wenn „Floating“ nicht ausgewählt ist, werden diese Blockelemente Zeile für Zeile angezeigt, was Platz beansprucht und zu einer sehr schlechten Benutzererfahrung führt.

Das Folgende ist der Code für Elemente ohne Floating

<p class=“box”>
        <p class=“box01”></p>
        <p class=“box02”></p>
    </p>
 .box{
    background: #000;
}
.box01{
    width: 100px;
    height: 100px;
    background: red;
}
.box02{
    width: 100px;
    height: 100px;
    background: yellow;
}

Bild 1-1 ist für Elemente ohne Floating und Bild 1-2 für die Breite und Höhe des äußeren Containers, der Zweck wird weiter unten besprochen

Nachdem wir dem Element Float hinzugefügt haben, ändert sich das Layout , zwei Die ps werden nebeneinander angezeigt, wie in Abbildung 1-3 gezeigt. Ist das nicht erstaunlich, haha?

Aber ist Ihnen aufgefallen, dass die Hintergrundfarbe der äußersten p-Ebene und die Höhe verschwunden sind? ist ebenfalls zu 0 geworden, da das Element abgetrennt ist. Der Dokumentfluss belegt keinen Platz im äußersten p. Zu diesem Zeitpunkt müssen wir den Float löschen und die Auswirkungen des Zusammenbruchs des übergeordneten Elements beseitigen, der durch das Floaten des untergeordneten Elements verursacht wird Element. (Beachten Sie, dass sich das Löschen von Floats hier nicht auf die Floats bezieht, die zuvor für untergeordnete Elemente festgelegt wurden. Zweitens bezieht es sich auf die Auswirkungen des Löschens von Floats auf übergeordnete Elemente. Ich hoffe, das kann jeder verstehen.)

Es gibt drei Möglichkeiten, Floats zu löschen:

Die erste: clear:both;

in das übergeordnete Element Fügen Sie ein p der Klasse „clear“ innerhalb des Elements hinzu (gleiche Ebene wie box01 und box02) und fügen Sie dann den Attributwert „clear:both“ zu dieser Klasse hinzu, um den Float zu löschen. Das Folgende ist der Code und die Wirkung nach dem Löschen des Floats. wie in Abbildung 1-3 gezeigt

<p class=“box”>
        <p class=“box01”></p>
        <p class=“box02”></p>
        <p class=“clear”></p>
    </p>
   .box{
    background: #000;
}
.clear{
    clear: both;
}
.box01{
    width: 100px;
    height: 100px;
    background: red;
    float: left;
}
.box02{
    width: 100px;
    height: 100px;
    background: yellow;
    float: left;
}

Sie können sehen, dass die Hintergrundfarbe und die Höhe des übergeordneten Elements hervorgehoben werden Das Element ist genau 100 Pixel groß und wird durch das untergeordnete Element gestreckt.

Zweiter Typ: Überlauf: versteckt;

Überlauf hinzufügen: versteckt im übergeordneten Element; Sie können den Float auch löschen, wie im folgenden CSS-Code gezeigt, aber diese Methode wird nicht empfohlen. Überlauf: versteckt; und eine Bedeutung besteht darin, den überschüssigen Teil zu verbergen. Wenn er nicht richtig gehandhabt wird, verursacht er dennoch Probleme auf der Seite.

.box{
        background: #000;
        overflow: hidden;
    }

Die dritte Methode: Clearfix;

Wenn Ihre Seite das Bootstrap-Framework verwendet, führen Sie die CSS-Datei ein und geben Sie sie ein it zum übergeordneten Element Durch Hinzufügen von Clearfix können Floats gelöscht werden. Dies ist auch die in der täglichen Arbeit am häufigsten verwendete Methode und die beliebteste Methode unter Programmierern. Sie müssen lediglich eine Klasse hinzufügen, und clear:both fügt dem Element ein zusätzliches p hinzu Seite. Daher empfiehlt der Herausgeber jedem die dritte Methode.

Wenn Ihre Seite nicht das Bootstrap-Framework verwendet, gibt es auch Quellcode, auf den Anfänger zurückgreifen können. Fügen Sie Pseudoklassen hinzu, um Floats zu löschen.

<p class=“box clearfix”>
        <p class=“box01”></p>
        <p class=“box02”></p>
        <p class=“clear”></p>
    </p>
 .box{
    background: #000;
}
.clearfix:before,.clearfix:after{
    content: ”;
    display: table;//可以很好的解决浏览器兼容问题
}
.clearfix:after{
    clear: both;
}
.box01{
    width: 100px;
    height: 100px;
    background: red;
    float: left;
}
.box02{
    width: 100px;
    height: 100px;
    background: yellow;
    float: left;
}

Hast du es gelernt? Freunde in Not, bitte holt es schnell ab.

Verwandte Empfehlungen:

Über die Zentrierung von CSS-Floating-Elementen

Einführung in die Definition und Verwendung von CSS-Floating und Positionierung

CSS Float und Float Clear (BFC) Einfaches Tutorial

Das obige ist der detaillierte Inhalt vonZusammenfassung der Methoden zum Löschen von CSS-Floats. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!