CSS versteht den Formatierungskontext BFC auf Blockebene

1.BFC-Definition

BFC (Blockformatierungskontext) wird wörtlich als „Formatierungskontext auf Blockebene“ übersetzt. Es handelt sich um einen unabhängigen Rendering-Bereich, an dem nur Boxen auf Blockebene (Elemente auf Blockebene) beteiligt sind. Er legt fest, wie die interne Box auf Blockebene angeordnet ist, und hat nichts mit der Außenseite dieses Bereichs zu tun > Laienhaft ausgedrückt: Das Element, das den BFC erstellt hat, ist eine unabhängige Box. Die Unterelemente im Inneren haben keinen Einfluss auf das Layout der äußeren Elemente (das Layout im Inneren hat jedoch keinen Einfluss auf das Äußere), der BFC gehört immer noch zum Gewöhnlichen Fluss im Dokument

2. Generierung von BFC:

Wissen, wie man BFC auslöst

1. Float-Attribut ist nicht none

2. Position ist nicht statisch und relativ

3. Überlauf ist nicht sichtbar

4. Anzeige ist Inline-Block, Tabellenzelle, Tabellenüberschrift, Flex , Inline-Flex

5. 
   

Sie werden feststellen, dass BFC überall ist, Sie wissen es nur nicht, wenn Sie es verwenden

3. BFC-Layoutregeln:

Was sind die Eigenschaften nach der Umwandlung in BFC, wie folgt:

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

2. Die linke Seite der Randbox jedes Elements steht in Kontakt mit der linken Seite der enthaltenden Blockrandbox (z Formatierung von links nach rechts, andernfalls umgekehrt. Dies gilt auch dann, wenn Float vorhanden ist.

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

4. 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.

5. Bei der Berechnung der BFC-Höhe sind auch schwebende Elemente an der Berechnung beteiligt
4. BFC-Funktion:

Verwenden Sie es, Boby

1. Randüberlappung verhindern

bfc bewirkt, dass sich die Ränder untergeordneter Elemente im selben bfc überlappen (der Abstand im vertikale Richtung der Box wird durch den Rand bestimmt. Die Ränder zweier benachbarter Boxen, die zum selben BFC gehören, überlappen sich)

Code:

 
 
String1
 
String2
 

Code:

 
 
String1
 
String2
 

Problem: Wenn alle untergeordneten Elemente eines Elements schweben, kommt es zu einem Höhenkollaps-Phänomen, das heißt, die Höhe des übergeordneten Containers wird nicht erweitert

Code:

Lösung:

Dieser Container enthält schwebende untergeordnete Elemente und seine Höhe wird erweitert, um seine untergeordneten Elemente aufzunehmen, die in diesem BFC in den regulären Dokumentfluss der Seite zurückfließen .

3. Lösen Sie das Layout: Verhindern Sie Textumbrüche

.pre2{ width: 200px; border: 2px solid red; /* 设置overflow*/ overflow:hidden; }

Code:

Das p-Element bewegt sich nicht, erscheint aber unter dem schwebenden Element. Die Zeilenfelder (bezogen auf Textzeilen) des p-Elements werden verschoben. Hier schafft die horizontale Schrumpfung von Leitungskästen Platz für schwebende Elemente.

 
 
 
sdfadsfdff fffffffds fsfffff sfd fsdsdfsdf fffffff
 

Verwandte Empfehlungen:

Detaillierte Erläuterung des CSS-BFC-Prinzips und seiner Anwendung

Analyse von Anwendungsbeispielen von BFC und IFC in CSS

In CSS versteckter BFC

Das obige ist der detaillierte Inhalt vonCSS versteht den Formatierungskontext BFC auf Blockebene. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!