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
Lösung für das Problem, dass die Tomcat-Konfiguration in Intelli Idea nicht gefunden wird
Ich bin vor kurzem in ein neues Unternehmen einge...
Detaillierte Schritte zur Installation von MySQL mit Cluster-RPM
MySQL-Datenbank installieren a) Laden Sie das MyS...
Detaillierte Bereitstellung von Docker+Gitlab+Gitlab-Runner
Umfeld Server: centos7 Kunde: Fenster Stellen Sie...
So deaktivieren Sie die Überprüfung auf Fremdschlüsseleinschränkungen in untergeordneten MySQL-Tabellen
Vorbereiten: Definieren Sie eine Lehrertabelle un...
Grundsätze zur Auswahl von MySQL-Datentypen
Inhaltsverzeichnis Klein aber fein Mach es einfac...
Interpretation von syslogd- und syslog.conf-Dateien unter Linux
1: Einführung in syslog.conf Für verschiedene Uni...
React-Tipps zeigen Ihnen, wie Sie Probleme mit Hook-Abhängigkeiten beseitigen
Ein sehr häufiges Szenario in react -Projekten: c...
So konfigurieren Sie den Whitelist-Zugriff in MySQL
Schritte zum Konfigurieren des Whitelist-Zugriffs...
Tiefes Verständnis von Zeilenhöhe und vertikaler Ausrichtung
Mehrere Konzepte Zeilenbox: Eine Box, die eine In...
Detaillierte Erläuterung der Verwendung von Befehlen in MySQL zum Erreichen einer hierarchischen Suchhilfe
Vorwort Dieser Artikel stellt hauptsächlich den r...
Grafisches Tutorial zur Installation von MySQL 8.0.15 und Datenbankgrundlagen
Die Installation der MySQL-Software und die Daten...
JavaScript zur Implementierung des Flugzeugkriegsspiels
In diesem Artikel erfahren Sie, wie Sie mit Canva...
Beispielcode zur Implementierung von Dreiecken und Pfeilen durch CSS-Rahmen
1. CSS-Boxmodell Die Box beinhaltet: Rand, Rahmen...
MySQL-Einstellungen zum Ändern des Root-Passworts, MySQL-Serververbindung, Diagramm allgemeiner MySQL-Befehle
1. Root-Passwort festlegen und ändern Überprüfen ...
So fügen Sie eine Nginx-Proxy-Konfiguration hinzu, um nur internen IP-Zugriff zuzulassen
Standort / { Index Index.jsp; Proxy_next_upstream...