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
Detailliertes Beispiel für die Bereitstellung der dynamischen und statischen Trennung von Nginx+Apache
Einführung in die dynamische und statische Trennu...
Tutorial zur Installation, Bereitstellung und Verwaltung von KVM-Virtualisierung
Inhaltsverzeichnis 1.kvm-Bereitstellung 1.1 KVM-I...
Die Vor- und Nachteile von Nginx und LVS und ihre geeignete Nutzungsumgebung
Lassen Sie uns zu Beginn darüber sprechen, was La...
Beispielcode zum Zeichnen von Doppelpfeilen in gängigen CSS-Stilen
1. Mehrere Aufrufe eines einzelnen Pfeils Sobald ...
Tiefgreifendes Verständnis der Verwendung von r2dbc in MySQL
Einführung MySQL sollte eine sehr häufig verwende...
So verwenden Sie den Yum-Befehl
1. Einführung in yum Yum (vollständiger Name Yell...
Die IE-Umgebung schreibt vor, dass die Div-Höhe größer sein muss als die Schrifthöhe
Code kopieren Der Code lautet wie folgt: <div ...
So installieren Sie Redis5.0.3 im Docker
1. Ziehen Sie das offizielle 5.0.3-Image [root@lo...
Vue3 verwendet Axios Interceptor zum Drucken von Front-End-Protokollen
Inhaltsverzeichnis 1. Einleitung 2. Verwenden Sie...
Unterscheiden Sie zwischen Nullwert und leerem Zeichen ('') in MySQL
Bei der täglichen Entwicklung geht es im Allgemei...
So installieren Sie Android x86 in einer virtuellen VMware-Maschine
Manchmal möchten Sie eine App testen, aber nicht ...
Reines CSS3 zum Erzielen einer schönen Bibliothek im Stil einer Eingabefeldanimation (Texteingabeliebe)
Teilen Sie eine wunderschöne Bibliothek im Animat...
Mehrere beliebte Website-Navigationsrichtungen in der Zukunft
<br />Dies ist nicht nur ein Zeitalter der I...
Optionsfelder und Multiple-Choice-Schaltflächen werden mit Bildern gestaltet
Ich habe schon Leute fragen hören, wie man Options...
Sperrt Mysql ALTER TABLE die Tabelle beim Hinzufügen von Feldern?
Inhaltsverzeichnis Vor MySQL 5.6 Nach MySQL 5.6 Z...