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
Implementierungsschritte für die Docker-Bereitstellung von Springboot- und Vue-Projekten
Inhaltsverzeichnis A. Docker-Bereitstellung des S...
Analyse und Lösung der Gründe, warum HTML-externe Referenz-CSS-Dateien nicht effektiv sind
Als Frontend-Neuling habe ich einige Tage am Front...
WeChat-Applet-Picker - Mehrspalten-Selektor (Modus = MultiSelector)
Inhaltsverzeichnis 1. Wirkungsdiagramm (mehrere S...
JavaScript-Closures erklärt
Inhaltsverzeichnis 1. Was ist ein Abschluss? 2. D...
Detaillierte grafische Beschreibung des Datenbankinstallationsprozesses der MySQL-Version 5.7.24
MySQL ist das beliebteste relationale Datenbankma...
Detaillierte Diskussion zum Thema mysqldump-Datenexport
1. Bei der Verwendung von mysqldump wird ein Fehl...
Detailliertes Verständnis der Vue-Methode zum Generieren von QR-Codes mit vue-qr
Inhaltsverzeichnis npm herunterladen Schritt (1) ...
Was bedeutet this.parentNode.parentNode (übergeordneter Knoten des übergeordneten Knotens)?
Der übergeordnete Knoten des übergeordneten Knoten...
Details zur Reihenfolge, in der MySQL my.cnf liest
Inhaltsverzeichnis Die Reihenfolge, in der MySQL ...
Vue implementiert Akkordeoneffekt
In diesem Artikelbeispiel wird der spezifische Co...
Die Vorteile und Beispiele für die Platzierung der Sitemap am unteren Rand der Webseite
Früher hatte fast jede Website eine Sitemap-Seite...
Detaillierte Erläuterung der Konfiguration der Yum-Quelle von Docker und deren Installation in CentOS7
Hier kommt CentOS7 zum Einsatz und die Kernel-Ver...
Detailliertes Tutorial zur Neuinstallation von Python 3.6.6 auf CentOS 7.5
ps: Die Umgebung ist wie der Titel Mögliche Abhän...
So fixieren Sie Inhalte beim Scrollen einer HTML-Seite an einer festen Position
In diesem Artikel wird hauptsächlich erläutert, w...
Der Unterschied zwischen z-index: 0 und z-index: auto in CSS
Ich habe vor Kurzem etwas über Stapelkontexte gel...