Heim > Artikel > Web-Frontend > Informationen zur Formatierung auf Blockebene in CSS
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:
BFC kann ausgelöst werden, wenn eine der folgenden Bedingungen erfüllt ist und sich in BFC umwandelt
Wurzelelement
Position
ist nicht statisch und relativ ist nicht sichtbarAnzeige Für Inline-Block, Tabellenzelle, Tabellenüberschrift, Flex, Inline-Flex
Sie werden feststellen, dass BFC überall ist, Sie wissen es nur nicht, wenn Sie es verwenden3. BFC-Layoutregeln: Was sind die Eigenschaften nach der Umwandlung in BFC, wie folgt: Die internen Boxen werden nacheinander in vertikaler Richtung platziert. Der vertikale Abstand der Box wird durch den Rand bestimmt. Die Ränder zweier benachbarter Boxen, die zum selben BFC gehören, überlappen sich Die linke Seite der Randbox jedes Elements steht in Kontakt mit der linken Seite der umgebenden Blockrandbox (bei Formatierung von links nach rechts). , sonst im Gegenteil). Dies gilt auch dann, wenn Float vorhanden ist. Der BFC-Bereich überschneidet sich nicht mit der Float-Box. 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. Bei der Berechnung der Höhe von BFC sind auch schwebende Elemente an der Berechnung beteiligt4. Funktion von BFC: Verwenden Sie es, um zu kommen1 .Ränder
Überlappung Problem: Wie Sie auf dem Bild sehen können, gibt es zwischen String1 und String2 nur einen Abstand von 20 Pixeln. Logischerweise sollte es 40 Pixel sein, aber dies führt dazu Überlappende Ränder im BFCCode:
Lösung: Wir können einen Container außerhalb des Div einschließen und den Container dazu veranlassen, einen BFC zu generieren. Dann gehören die beiden Divs nicht zum selben BFC und es kommt nicht zu einer Randüberlappung.
<style>.container1{ /* 通过overflow:hidden可以创建bfc */ overflow: hidden; background-color: red; width: 300px; } .sub1{ margin: 20px 0px; background-color: #dea; }</style><div class="container1"> <div class="sub1">String1</div> <div class="sub1">String2</div></div>
Code:
2.
Float löschen<style> .newbfc{ overflow: hidden; }</style><div class="container1"> <div class="sub1">String1</div> <div class="newbfc"><div class="sub1">String2</div></div></div>:
Code:
Lösung:
<style> .pre2{ width: 200px; border: 2px solid red; } .float1,.float2{ width: 100px; height: 100px; float: left; } .float1{ background-color: #dee; } .float2{ background-color: #dcc; }</style><div class="pre2"> <div class="float1"></div> <div class="float2"></div></div>Bfc-Regeln: Bei der Berechnung der Höhe von BFC nehmen auch schwebende Elemente an der Berechnung teil. Solange der übergeordnete Container auf bfc eingestellt ist, können die untergeordneten Elemente einbezogen werden:
Dieser Container enthält schwebende untergeordnete Elemente. Die Höhe des Elements wird erweitert, um seine untergeordneten Elemente einzuschließen. In diesem BFC fallen diese Elemente in den regulären Dokumentfluss der Seite zurück.
3. Lösen Sie das Layout: Textumbruch verhindern
.pre2{ width: 200px; border: 2px solid red; /* 设置overflow*/ overflow:hidden; }
Code:
Das p-Element wird nicht verschoben , Aber es erscheint unterhalb des schwebenden Elements. Die Zeilenfelder (bezogen auf Textzeilen) des p-Elements werden verschoben. Hier schafft die horizontale Schrumpfung von Leitungskästen Platz für schwebende Elemente.
<style>.container2{ overflow: hidden; width: 200px; } .box{ float: left; width: 100px; height: 30px; background-color: #daa; }</style><div class="container2"> <div class="box"></div> <p style="background-color: #eea">sdfadsfdff fffffffds fsfffff sfd fsdsdfsdf fffffff</p></div>BFC-Regeln: Die linke Seite des Randfelds jedes Elements berührt die linke Seite des enthaltenden Blockrahmenfelds (bei Formatierung von links nach rechts, andernfalls umgekehrt). Dies gilt auch dann, wenn Float vorhanden ist. Um dieses Problem zu lösen, fügen Sie einfach overflow:hidden zum p-Element hinzu, um es zu einem neuen bfc zu machen. Ich glaube, Sie beherrschen die Methode, nachdem Sie diese Fälle gelesen haben. Bitte beachten Sie PHP Weitere verwandte Artikel auf der chinesischen Website! Verwandte Lektüre:
Welche Attribute werden häufig zum Unterteilen von Rahmen und Fenstern in HTML verwendet?
Was sind die Verweise auf CSS in HTML? Methoden
Welche Methoden gibt es für De-Bordering und randlose Iframes
Das obige ist der detaillierte Inhalt vonInformationen zur Formatierung auf Blockebene in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!