Was ist BFC? So löschen Sie Floats mithilfe von CSS-Pseudoelementen
|
BFC-Konzept: Der Blockformatierungskontext ist ein unabhängiger Rendering-Bereich, der die Elemente innerhalb des BFC von den Elementen außerhalb isoliert, sodass die Positionierung der internen und externen Elemente sich nicht gegenseitig beeinflusst. Lassen Sie uns zunächst einen Begriff verstehen: BFC (Blockformatierungskontext), was auf Chinesisch „Formatierungskontext auf Blockebene“ bedeutet. Merken Sie sich zunächst ein Prinzip: Wenn ein Element über einen BFC verfügt, hat die Änderung der internen Elemente keine Auswirkungen auf die externen Elemente. Daher ist es bei BFC-Elementen nicht möglich, dass sich die Ränder überlappen, da sich dies auf die Elemente außerhalb des Elements auswirkt. BFC-Elemente können auch verwendet werden, um die Auswirkungen des Schwebens zu beseitigen, denn wenn dies nicht geschieht, führt das Schweben der untergeordneten Elemente dazu, dass die Höhe des übergeordneten Elements zusammenbricht, was sich zwangsläufig auf das Layout und die Positionierung der nachfolgenden Elemente auswirkt, was offensichtlich der Einstellung widerspricht, dass die untergeordneten Elemente des BFC-Elements die externen Elemente nicht beeinflussen. Die folgenden Situationen lösen den BFC aus: • <html>-Stammelement Wenn wir den Überlaufwert auf „Versteckt“ setzen und dem Containerelement BFC zuweisen, führt das Schweben des untergeordneten Elements offensichtlich nicht zum Höheneinbruch des übergeordneten Elements. Verwenden Sie Pseudoklassenelemente, um Floating zu löschen:
.clearFix::nach, .clearFix::vor {
Anzeige: Block;
Inhalt: '';
klar: beides;
Sichtbarkeit: versteckt;
Höhe: 0;
}
.clearFix { zoom: 1;}Zusammenfassen Oben ist die CSS-Methode zum Verwenden von Pseudoelementen zum Löschen von Floating, die ich Ihnen vorgestellt habe. Ich hoffe, sie wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten! |
>>: Webdesign-Erfahrung: Selbstgerechte Webdesigner
Artikel empfehlen
Einführung in Jenkins und wie man Jenkins mit Docker bereitstellt
1. Verwandte Konzepte 1.1 Jenkins-Konzepte: Jenki...
Drei Methoden zum Ändern des Hostnamens von Centos7
Methode 1: Hostnamectl-Änderung Schritt 1 Überprü...
Zusammenfassung der Spring Boot Docker-Verpackungstools
Inhaltsverzeichnis Spring Boot Docker Spring-Boot...
Detaillierte Erläuterung der Konfiguration und Optimierung des statischen Nginx-Dateidienstes
Stammverzeichnis und Indexdatei Die Root-Direktiv...
Gründe und Lösungen für das fehlgeschlagene Einfügen von Emoji-Ausdrücken in MySQL
Fehlerszenario Beim Aufrufen von JDBC zum Einfüge...
Beispielcode zur Implementierung von Dreiecken und Pfeilen durch CSS-Rahmen
1. CSS-Boxmodell Die Box beinhaltet: Rand, Rahmen...
JavaScript CSS3 zur Implementierung einer einfachen Video-Sperrfunktion
In diesem Artikel wird versucht, eine Demo zur Si...
Warum wird die MySQL-Paging-Funktion bei Verwendung von Limits immer langsamer?
Inhaltsverzeichnis 1. Testexperiment 2. Leistungs...
Beispielcode für die Verwendung von CSS zur Implementierung des Logistikfortschrittsstils
Wirkung: CSS-Stil: <style type="text/css&...
Rundungsvorgang des Datums-/Uhrzeitfelds in MySQL
Inhaltsverzeichnis Vorwort 1. Hintergrund 2. Simu...
Erste Schritte mit Nginx Reverse Proxy
Inhaltsverzeichnis Überblick Die Rolle des Revers...
So speichern Sie Bilder in MySQL
1 Einleitung Beim Gestalten einer Datenbank ist e...
Docker-Container wird nach der Ausführung beendet (wie kann man ihn weiter ausführen)
Phänomen Starten Sie den Docker-Container docker ...
Methoden für JavaScript-String-Objekte
Inhaltsverzeichnis Methoden des String-Objekts Me...
So verwenden Sie den Linux-Befehl seq
1. Befehlseinführung Mit dem Befehl seq (Sequence...