So löschen Sie CSS-Float

Dieses Mal werde ich Ihnen die Methode zum Löschen von CSS-Floating und die Vorsichtsmaßnahmen zum Löschen von CSS-Floating vorstellen. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

1. Warum schweben wir?

Warum müssen wir Floats löschen? 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 Elementcode ohne Floating

Bild 1-1 zeigt das Element ohne Floating und Bild 1-2 zeigt die Breite und Höhe des äußeren Containers wird weiter unten besprochen. Absicht

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

Nachdem wir Float zum Element hinzugefügt haben, ändert sich das Layout und die beiden Ps werden nebeneinander angezeigt. Wie in Abbildung 1-3 gezeigt. Ist das nicht erstaunlich, haha ​​​​

Aber haben Sie bemerkt, dass die Hintergrundfarbe des äußersten p verschwunden ist und die Höhe ebenfalls 0 geworden ist, weil das Element vorhanden ist? Vom Dokumentenfluss getrennt, und das äußerste p Es nimmt keinen Platz ein. Zu diesem Zeitpunkt müssen wir den Float löschen und die Auswirkungen des Zusammenbruchs des übergeordneten Elements beseitigen, der durch das Floating des untergeordneten Elements verursacht wird. (Beachten Sie, dass sich das Löschen von Floats hier nicht auf die zuvor für untergeordnete Elemente festgelegten Floats bezieht. 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 herauskommt und die Höhe des übergeordneten Elements genau 100 Pixel beträgt, was unterstützt wird von die untergeordneten Elemente.

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 Diese Methode wird nicht empfohlen. Überlauf: Eine andere Bedeutung besteht darin, den überschüssigen Teil auszublenden.

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

Die dritte Methode: Clearfix;

Wenn Ihre Seite das

Bootstrap

-Framework verwendet, führen Sie die CSS-Datei ein und fügen Sie Clearfix hinzu Das übergeordnete Element Floats kann gelöscht werden. Dies ist auch die am häufigsten verwendete Methode bei der täglichen Arbeit und die beliebteste Methode unter Programmierern. Fügen Sie einfach eine Klasse hinzu, und clear:both fügt der Seite ein zusätzliches p hinzu. 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.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

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

Empfohlene Lektüre:

h5 implementiert das Hochladen mehrerer Bildvorschauen und Steuerelemente per Mausklick und Ziehen

S5 ermöglicht Ebenen Bildschirme anpassen

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