Detaillierte Erklärung des BFC-Modus

Dieses Mal werde ich Ihnen eine detaillierte Erklärung des BFC-Modus geben. Was sind die Vorsichtsmaßnahmen bei der Verwendung des BFC-Modus?

Ausführliche Erklärung des BFC-Blockformatierungskontexts】

Sie glauben vielleicht nicht, dass BFC eine häufige Sache ist. Aber Sie werden es auf jeden Fall häufig verwenden. Vielleicht haben Sie bei der Verwendung nicht an BFC gedacht. Was genau ist das also?

Die offizielle BFC-Erklärung lautet: Floating-Elemente und absolut positionierte -Elemente, Blockebenencontainer von Nicht-Blockebenen-Boxen (wie inline-blocks, table-cells und table-captions), und Boxen auf Blockebene mit einem anderen Überlaufwert als „visiable“ erstellen einen neuen Formatierungskontext auf Blockebene für ihren Inhalt.

In einem Formatierungskontext auf Blockebene werden die Felder vertikal nacheinander angeordnet, beginnend am oberen Rand des enthaltenden Blocks. Der vertikale Abstand zwischen zwei Feldern wird durch ihren Randwert bestimmt. Die vertikalen Ränder zweier benachbarter Boxen auf Blockebene überlappen sich.

In einem Formatierungskontext auf Blockebene berührt der äußere linke Rand (margin-left) jedes Felds den linken Rand (border-left) des Containers (für rechts-nach- Bei der linken Formatierung berührt es den rechten Rand, auch wenn ein Float vorhanden ist, es sei denn, die Box erstellt einen neuen Formatierungskontext auf Blockebene.

„block formatting context“ wird oben wiederholt erwähnt. Es ist offensichtlich, dass BFC ihre Abkürzung ist. Die offizielle Abkürzung hat auch „inline formatting context“, was bedeutet, dass wir näher darauf eingehen müssen Schauen Sie sich an, was es bedeutet. Dann lassen Sie es uns aufschlüsseln und einen Blick darauf werfen: formatting context

Formatierung: n, die Bedeutung von Formatierung, v, zu formatieren (das Partizip Präsens von Format); legt das Format (oder die Form) von... fest; Kontext: Kontext; context“, also dem Inhalt der Seite. Ein Rendering-Bereich mit einer Reihe von Rendering-Regeln, die bestimmen, wie seine untergeordneten Elemente positioniert werden, sowie ihre Beziehung und Interaktion mit anderen Elementen.
Die häufigsten Formatierungskontexte sind (kurz BFC) und

(kurz IFC). In CSS2.1 gibt es nur BFC und FFC, und in CSS3 sind Box auch aus visueller Sicht ein wichtiges Konzept , es ist eine Seite. Sie besteht aus vielen Boxen. Der Elementtyp und das Anzeigeattribut bestimmen den Typ der Box. Verschiedene Box-Typen nehmen an verschiedenen

teil (einem Container, der bestimmt, wie das Dokument gerendert wird), sodass die Elemente innerhalb der Box auf unterschiedliche Weise gerendert werden.

Zum Beispiel generieren Elemente mit den Anzeigeattributwerten Block, Listenelement und Tabelle Boxen auf Blockebene. Und beteiligen Sie sich am Blockformatierungskontext. Inline-Level-Box: Elemente mit den Anzeigeattributen Inline, Inline-Block und Inline-Table generieren eine Inline-Level-Box. Und engagieren Sie sich Block fomatting context. Inline formatting context

Dann lassen Sie es uns in Laienbegriffen verstehen: BFC bedeutet „Formatierungskontext auf Blockebene“. Das Element, das den BFC erstellt, ist eine unabhängige Box, aber nur die Box auf Blockebene kann an der Erstellung des BFC beteiligt sein. Es legt fest, wie die interne Box auf Blockebene angeordnet ist, und das Layout in dieser unabhängigen Box wird von außen natürlich nicht beeinflusst.

Formatting contextDann werfen wir einen Blick auf einige Merkmale von BFC-Boxen:

inline formatting context1. Die internen Boxen werden nacheinander in vertikaler Richtung, beginnend von oben, platziert.

2. Der vertikale Abstand der Box wird durch den Rand bestimmt. Die Ränder zweier benachbarter Boxen, die zum selben BFC gehören, überlappen sich.

3. Die linke Seite des Randfelds jedes Elements berührt die linke Seite des umgebenden Blockrahmenfelds (bei Formatierung von links nach rechts, andernfalls ist das Gegenteil der Fall). Dies gilt auch dann, wenn Float vorhanden ist.

4. Der BFC-Bereich überschneidet sich nicht mit der Float-Box.

5. BFC ist ein isolierter unabhängiger Container auf der Seite. Die Unterelemente innerhalb des Containers haben keinen Einfluss auf die Elemente außerhalb und umgekehrt.

6. Bei der Berechnung der BFC-Höhe werden auch schwebende Elemente berücksichtigt.

In welchen Szenarien kann BFC verwendet werden?

1 RandüberlagerungWenn die Felder nach oben und unten angeordnet sind, wobei das obere Feld Rand unten

:50px; das untere Feld

Rand oben:50 ist Dann passiert etwas Magisches: Wenn die beiden Felder überlagert werden, sollte der Abstand 100 Pixel betragen. Wir haben jedoch festgestellt, dass die beiden Randwerte tatsächlich übereinander liegen und nur 50 Pixel übrig bleiben. Dann können wir den BFC-Modus auslösen und fügen Sie einem der Felder ein übergeordnetes Element hinzu

2. Wird für das Layout verwendet

Der linke Rand des Elements berührt den äußeren Rand des enthaltenden Blockcontainers, auch wenn ein Float vorhanden ist Verwenden Sie diese Methode, um ein zweispaltiges Layout zu erstellen, wobei dem ersten Feld ein freier Rand zugewiesen wird.

3. Verwenden Sie , um das Feld zu löschen BFC-Höhe

Wir haben festgestellt, dass sich die beiden Boxen aufgrund der schwebenden Beziehung zwischen den beiden darin enthaltenen untergeordneten Elementen vom umschließenden Block des übergeordneten Elements und der Höhe des übergeordneten Elements getrennt haben Wir müssen dafür sorgen, dass das übergeordnete Element zwei untergeordnete Elemente enthält. Bei der Berechnung der Höhe sind zwei schwebende untergeordnete Elemente beteiligt. Daher müssen wir den Float schließen und den BFC des übergeordneten Elements auslösen, z. B. overflow: versteckt;

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie die Attributwertvererbung in CSS

CSS zum Erstellen von Punkteffekten

CSS3-Attribute Übergang, Animation, Transformation

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