Detaillierte Erklärung wichtiger BFC in CSS

In diesem Artikel geben wir Ihnen hauptsächlich eine detaillierte Erklärung des wichtigen BFC in CSS. Das Verständnis von BFC kann uns helfen, einige der ursprünglich seltsamen (??) Stellen in CSS zu verstehen.

1. Einführung

Bevor wir BFC erklären, sprechen wir über den Dokumentenfluss. Der Dokumentenfluss, über den wir oft sprechen, ist tatsächlich in drei Typen unterteilt: Positionierter Fluss, Floating Flow und Normaler Fluss. Der gewöhnliche Fluss bezieht sich tatsächlich auf den FC in BFC. FC (Formatierungskontext), wörtlich übersetzt als Formatierungskontext, ist ein Rendering-Bereich auf der Seite. Er verfügt über eine Reihe von Rendering-Regeln, die die Anordnung seiner Unterelemente sowie deren Beziehung und Rolle zu anderen Elementen bestimmen. Zu den gängigen FCs gehören BFC, IFC, GFC und FFC.

BFC(Blockformatierungskontext) Der Formatierungskontext auf Blockebene ist ein Rendering-Bereich, der zum Layouten von Boxen auf Blockebene verwendet wird, oder unter bestimmten Bedingungen eine Rendering-Regel.

Erklärung zu MDN: BFC ist der visuelle CSS-Rendering-Teil der Webseite. Es ist der Bereich, in dem das Box-Layout auf Blockebene erfolgt und in dem schwebende Elemente mit anderen Elementen interagieren.

2. BFC-Auslösemethode

1. Stammelement, also HTML-Tag

2. Der Wert von float ist nicht none , es ist left, right

3. Überlaufwert ist nicht sichtbar, aber auto, scroll, hidden

4. Anzeigewert Für inline-block, table-cell, table-caption, flex, inline-flex, grid, inline-grid

5. ist der Positionswert absolute, fixed

Hinweis: display:table kann auch BFC generieren, da Table standardmäßig eine anonyme Tabellenzelle generiert, die von dieser anonymen generiert wird Tabellenzelle BFC.

3. Einschränkungsregeln

Browser-Einschränkungsregeln für den BFC-Bereich:

1. Die untergeordneten Elemente des generierten BFC-Elements werden nacheinander platziert . Ihr Startpunkt in vertikaler Richtung ist die Oberseite eines enthaltenden Blocks, und der vertikale Abstand zwischen zwei benachbarten untergeordneten Elementen hängt von der Randeigenschaft des Elements ab. In BFC werden die Ränder benachbarter Elemente auf Blockebene reduziert (Mastering margin collapsing).

2. Generieren Sie ein BFC-Element, in dem der linke Rand jedes untergeordneten Elements den linken Rand des enthaltenden Blocks berührt (bei der Formatierung von rechts nach links berührt der rechte Rand den rechten Rand). , auch wenn das Element schwebend ist (obwohl der Inhaltsbereich des untergeordneten Elements aufgrund des schwebenden Elements komprimiert wird), es sei denn, das untergeordnete Element erstellt auch einen neuen BFC (z. B. wenn es selbst ein schwebendes Element ist).

Regelinterpretation:

1. Die internen Boxen werden nacheinander in vertikaler Richtung platziert

2. Der vertikale Abstand der inneren Box wird durch den Rand bestimmt. (Die vollständige Aussage lautet: Die Ränder zweier benachbarter Boxen, die zum selben BFC gehören, werden gefaltet, verschiedene BFCs werden jedoch nicht gefaltet.)

3. Der linke Rand jedes Elements ist der Das Gleiche gilt: Die linken Kanten der enthaltenden Blöcke berühren sich (von links nach rechts), auch bei schwebenden Elementen. (Dies zeigt, dass das Unterelement in BFC seinen enthaltenden Block nicht überschreitet, während das Element mit absoluter Position die Grenze seines enthaltenden Blocks überschreiten kann)

4. Die Fläche von​ ​BFC überschneidet sich nicht mit dem Float-Element. Bereichsüberlappung

5. Bei der Berechnung der Höhe von BFC nehmen auch schwebende untergeordnete Elemente an der Berechnung teil

4. Funktion

BFC ist die Seite Ein isolierter unabhängiger Container im Container, die untergeordneten Elemente im Container haben keinen Einfluss auf die äußeren Elemente und umgekehrt. Wir können diese Funktion von BFC für viele Dinge nutzen.

4.1 Verhindern, dass Elemente durch Floating-Elemente abgedeckt werden

Ein Blockelement im normalen Dokumentfluss kann durch ein Float-Element abgedeckt werden und den normalen Dokumentfluss belegen, sodass Sie das Float festlegen können. Anzeige- und Positionswerte eines Elements Lösen Sie BFC auf andere Weise aus, um zu verhindern, dass es von schwebenden Boxen verdeckt wird.
DEMO anzeigen

4.2 Floating-Elemente können eingebunden werden

Durch Ändern des Attributwerts der übergeordneten Box, die das schwebende untergeordnete Element enthält, wird BFC ausgelöst, um die schwebende Box des untergeordneten Elements aufzunehmen .
DEMO anzeigen

4.3 Verhindern der Verschmelzung von Rändern benachbarter Elemente

Die oberen und unteren Ränder zweier benachbarter Unterelemente auf Blockebene, die zum selben BFC gehören, überlappen sich (Schreibweise festlegen). -mode :tb-rl, horizontale Ränder überlappen). Daher kann eine Randüberlappung verhindert werden, wenn zwei benachbarte untergeordnete Elemente auf Blockebene zu unterschiedlichen BFCs gehören.
Hier wird ein p um die Außenseite einer beliebigen benachbarten Box auf Blockebene gewickelt. Durch Ändern der Attribute dieses p gehören die beiden ursprünglichen Boxen zu zwei verschiedenen BFCs, um Randüberlappungen zu verhindern.

DEMO anzeigen

Aber hier ist eine Frage:
Wenn es mit einer p-Schicht umschlossen ist, kann das Festlegen eines Attributs, das BFC auslösen kann, benachbarte Elemente verhindern vom Sein Ränder verschmelzen. Da sie zu unterschiedlichen BFCs gehören, findet keine Margin-Zusammenführung statt.
Wenn Sie außen kein p einfügen, kann die Einstellung der Anzeige auf „Inline-Block“, „Inline-Flex“, „Table-Captain“, „Position“ auf „Absolut“, „Fixed“ und „Float“ auf „Links“ oder „Rechts“ das Zusammenführen von Rändern verhindern. Hier kommt die Frage:

Wir wissen, dass das Festlegen von Position und Float dazu führt, dass das Element aus dem Dokumentfluss ausbricht und einen neuen BFC erstellt, sodass die beiden Elemente keine benachbarten Elemente sind, sodass verhindert werden kann, dass die Ränder benachbarter Elemente zusammengeführt werden, sondern inline -block und inline-flex , inline-grid, table-captain warum? Wenn jemand weiß, warum, lassen Sie es mich bitte wissen~

Verwandte Empfehlungen:

BFC versteckt in CSS

Was ist BFC? Ein einfaches Verständnis von bfc

Floating-Definition und Floating-Clearing (BFC)

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung wichtiger BFC in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!