CSS-Methode zum Löschen von Float und BFC

BFC

BFC: Blockformatierungskontext

BFC-Layoutregeln

Die Innenboxen werden in vertikaler Richtung hintereinander platziert.
Der vertikale Abstand der Box wird durch den Rand bestimmt. Die Ränder zweier benachbarter Boxen, die zum selben BFC gehören, überlappen sich.
Bei der Berechnung der Höhe des BFC werden auch schwimmende Elemente mit einberechnet.
Der BFC-Bereich überlappt sich nicht mit der Float-Box.
Die linke Kante des Randfelds jedes Felds (Block- und Zeilenfelder) berührt die linke Kante des Grenzfelds des umgebenden Blocks (für die Formatierung von links nach rechts und umgekehrt). Dies gilt auch, wenn Floats vorhanden sind.
BFC ist ein isolierter, unabhängiger Container auf der Seite. Die untergeordneten Elemente im Container wirken sich nicht auf die Elemente außerhalb aus. Das Gleiche gilt auch umgekehrt.

So erstellen Sie einen Blockformatierungskontext

1. Der Wert von Float ist nicht „none“.

2. Der Wert der Position ist weder statisch noch relativ.

3. Der Wert von display ist inline-block, table-cell, flex, table-caption oder inline-flex
4. Der Überlaufwert ist nicht sichtbar

Die Rolle von BFC

1. Verwenden Sie BFC, um Randüberlappungen zu vermeiden.

2. Adaptives zweispaltiges Layout

3. Schwimmer löschen.

Schwimmer löschen

Das Löschen von Floats dient hauptsächlich dazu, das Problem zu lösen, dass die interne Höhe des übergeordneten Elements aufgrund des Floatens untergeordneter Elemente 0 beträgt.

Methode zum Löschen von Floats

1. Zusätzliche Kennzeichnungsmethode

Fügen Sie nach dem letzten schwebenden Label ein neues Label hinzu und setzen Sie es auf „clear: both;“ (nicht empfohlen).

Vorteile: leicht verständlich, bequem

Nachteile: Hinzufügen bedeutungsloser Tags, schlechte Semantik

<Stil>
        .div1 {
            Hintergrund: #00a2d4;
        }
        .links {
            schweben: links;
            Breite: 200px;
            Höhe: 200px;
            Hintergrund: #9889c1;
        }
        .Rechts {
            schweben: rechts;
            Breite: 200px;
            Höhe: 200px;
            Hintergrund: orangerot;
        }
        .klar {
            klar: beides;
        }
    </Stil>
</Kopf>
<Text>
<div Klasse="div1">
    <div class="left">Links</div>
    <div class="right">Rechts</div>
    <div Klasse="klar"></div>
</div>
<div Klasse="div2"></div>
</body>

2. Fügen Sie dem übergeordneten Element ein Überlaufattribut hinzu

Beseitigen Sie das Floaten durch Auslösen von BFC. (Nicht empfohlen)

Vorteile: prägnanter Code

Nachteile: Bei zunehmendem Inhalt kann es leicht dazu kommen, dass der Inhalt aufgrund eines Fehlers beim automatischen Zeilenumbruch ausgeblendet wird und die überlaufenden Elemente nicht angezeigt werden können.

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Titel</title>
    <Stil>
        .div1 {
            Hintergrund: #00a2d4;
            Überlauf: versteckt;
        }
        .links {
            schweben: links;
            Breite: 200px;
            Höhe: 200px;
            Hintergrund: #9889c1;
        }
        .Rechts {
            schweben: rechts;
            Breite: 200px;
            Höhe: 200px;
            Hintergrund: orangerot;
        }
    </Stil>
</Kopf>
<Text>
<div Klasse="div1">
    <div class="left">Links</div>
    <div class="right">Rechts</div>
</div>
<div Klasse="div2"></div>
</body>
</html>

3. Verwenden Sie das Pseudoelement „after“, um den Float zu löschen (empfohlen)

Vorteile: Entspricht dem Closed-Floating-Konzept und verfügt über eine korrekte Struktursemantik.

Nachteile: IE6-7 unterstützt keine Pseudoelemente: Verwenden Sie danach Zoom: 1, um hasLayout auszulösen.

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Titel</title>
    <Stil>
        .div1 {
            Hintergrund: #00a2d4;
        }
        .links {
            schweben: links;
            Breite: 200px;
            Höhe: 200px;
            Hintergrund: #9889c1;
        }
        .Rechts {
            schweben: rechts;
            Breite: 200px;
            Höhe: 200px;
            Hintergrund: orangerot;
        }
        .clearfix:nach {
            Inhalt: ""; /*Der Inhalt ist leer*/
            Anzeige: Block; /*In Blockelement konvertieren*/
            Höhe: 0; /*Höhe ist 0*/
            löschen: beide; /*Float löschen*/
            Sichtbarkeit: versteckt; /*Box verstecken*/
        }
        .klarfix {
            *zoom: 1; /*IE6\7-Verarbeitungsmethode*/
        }
    </Stil>
</Kopf>
<Text>
<div Klasse="div1 Clearfix">
    <div class="left">Links</div>
    <div class="right">Rechts</div>
</div>
<div Klasse="div2"></div>
</body>
</html>

4. Verwenden Sie vor und nach doppelten Pseudoelementen, um Floats zu löschen

Vorteile: Es kann nicht nur schwebende Objekte löschen, sondern auch das Problem des Höhenkollapses lösen (fügen Sie dem übergeordneten Feld den Klassennamen Clearfix hinzu).

Nachteil: Verwenden Sie zoom:1, um hasLayout auszulösen.

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Titel</title>
    <Stil>
        .div1 {
            Hintergrund: #00a2d4;
        }
        .links {
            schweben: links;
            Breite: 200px;
            Höhe: 200px;
            Hintergrund: #9889c1;
        }
        .Rechts {
            schweben: rechts;
            Breite: 200px;
            Höhe: 200px;
            Hintergrund: orangerot;
        }
        .clearfix:nach, .clearfix:vor {
            Inhalt: "";
            Anzeige: Tabelle;
        }
        .clearfix:nach {
            klar: beides;
        }
        .klarfix {
            *Zoom: 1;
        }
    </Stil>
</Kopf>
<Text>
<div Klasse="div1 Clearfix">
    <div class="left">Links</div>
    <div class="right">Rechts</div>
</div>
<div Klasse="div2"></div>
</body>
</html>

Zusammenfassen

Dies ist das Ende dieses Artikels über CSS Clear Float und BFC. Weitere relevante CSS Float BFC-Inhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<: So installieren und implementieren Sie einen Gitlab-Server auf CentOS7

>>: Drücken Sie die Eingabetaste, um das Formular automatisch abzuschicken. Unerwartete Entdeckung

Durchführung der lokalen Migration von Docker-Images

Druid-Verbindungspool mit niedriger Version + MySQL-Treiber 8.0 führt zu Thread-Blockierungen und Leistungseinschränkungen

Inhaltsverzeichnis Phänomen Ursachenanalyse Aufru...

Detaillierte Erläuterung der KVM-Bereitstellung von drei virtuellen Maschinen zur Implementierung des WordPress-Experiments

1. Einführung in KVM Die Abkürzung für Kernel-bas...

CSS-Methode zum Löschen von Float und BFC

Durchführung der lokalen Migration von Docker-Images

RGB-Farbtabellensammlung

Einfaches Tutorial zu den Firewall-Einstellungen unter Ubuntu 20.04 (Anfänger)

So öffnen Sie das MySQL-Binlog-Protokoll

Installieren Sie mehrere PHP-Versionen für Nginx unter Linux

Design-Tipps: Wir glauben, es wird Ihnen gefallen

Vue implementiert die Benutzeranmeldungsumschaltung

Einführung in lokale Komponenten in Vue

Implementierung und Optimierung von MySql-Unterabfragen IN

So konfigurieren Sie Benutzerrollenberechtigungen in Jenkins

Artikel empfehlen

Lösung für das Problem der Nullspalte in der NOT IN-Füllgrube in MySQL

Eine kurze Analyse der Zählverfolgung einer Anfrage in nginx

VMware12.0-Installation Ubuntu14.04 LTS-Tutorial

Druid-Verbindungspool mit niedriger Version + MySQL-Treiber 8.0 führt zu Thread-Blockierungen und Leistungseinschränkungen

So verwenden Sie die Markdown-Editor-Komponente in Vue3

Benutzerdefinierte Tabbar-Komponente für das WeChat-Applet

Zusammenfassung des MySQL Undo Log und Redo Log

Ausführliche Erläuterung der Kenntnisse zu MySql-Tabellen, Datenbanken, Sharding und Partitionierung

So stellen Sie MongoDB-Container mit Docker bereit

Ausführliche Erläuterung der MySQL-Isolationsebene und des Sperrmechanismus

Detaillierte Erklärung und Erweiterung von ref und reactive in Vue3

Detaillierte Erläuterung der KVM-Bereitstellung von drei virtuellen Maschinen zur Implementierung des WordPress-Experiments

6 Lösungen für Netzwerkfehler im Docker-Container

Lösung für den Fehler, dass IE6 select nicht durch div abgedeckt werden kann

So erhalten Sie die Breite und Höhe des Bildes im WeChat-Applet