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

Einigen Eigenschaften in CSS geht ein "*" oder "_" voraus.

CSS-Methode zum Löschen von Float und BFC

Einigen Eigenschaften in CSS geht ein "*" oder "_" voraus.

Beispiel einer MySql-Fuzzy-Abfrage-Lösung zum Abrufen von JSON-Schlüsselwörtern

Chrome überwacht Cookie-Änderungen und weist Werte zu

Vue ElementUI Form-Formularvalidierung

Verstehen von MySQL-Deadlock-Routinen durch eindeutige Index-S-Sperre und X-Sperre

Vue implementiert die vollständige Auswahlfunktion

Über MySQL müssen Sie die Datentypen und Operationstabellen kennen

So installieren Sie Linux Flash

So verwalten Sie mehrere Projekte auf dem CentOS SVN-Server

Tutorial zu den Grundlagen von JavaScript und JQuery Framework

Artikel empfehlen

Detaillierte Erläuterung der MySQL-Mehrtabellenabfrage

MySQL implementiert das automatische Hinzufügen von Zeit und das automatische Aktualisieren von Zeit

Die Eisernen Gesetze der MySQL-Datenbank (Zusammenfassung)

So implementieren Sie eine Remote-Verbindung für Redis unter Linux

Mysql implementiert drei Funktionen zum Feldspleißen

Detaillierte Schritte zur Installation der XML-Erweiterung in PHP unter Linux

Nginx erstellt Implementierungscode für RTMP-Liveserver

js, um die Rotation von Webseitenbildern zu realisieren

Linux-Swap-Partition (ausführliche Erklärung)

Häufige Verwendung von Hooks in React

MySQL-Datenbank implementiert MMM-Hochverfügbarkeitsclusterarchitektur

Eine einfache Methode, um mit der Mindestbreite und Mindesthöhe von IE6 kompatibel zu sein

Eine kurze Diskussion über die Unterschiede und Verbindungen zwischen .html, .htm, .shtml und .shtm

Javascript zum Umschalten durch Klicken auf das Bild

So berechnen Sie die Bildrate FPS von Webanimationen