Ich habe schon einmal gehört, dass jemand BFC in CSS erwähnt hat, und während der IFE-Übung bin ich zufällig auf das Problem des Margin-Zusammenbruchs gestoßen, also habe ich zufällig den Mechanismus von BFC herausgefunden. (Siehe Referenz am Ende des Artikels als Referenzquelle)
Dieser Artikel stellt Ihnen hauptsächlich die relevanten Informationen zur Verwendung von BFC und IFC in CSS vor. Der Herausgeber findet es ziemlich gut, also werde ich es teilen Nehmen Sie es jetzt mit und geben Sie es als Referenz weiter. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.
1 Was ist BFC
Wie bei allen vorherigen Blogbeiträgen beginnen wir mit der Einführung aus der Perspektive von „Was“ und verstehen BFC von der Oberflächlichkeit zur Tiefe.
Der sogenannte Formatierungskontext ist ein Konzept in der W3C CSS2.1-Spezifikation.
Es handelt sich um einen Rendering-Bereich auf der Seite und verfügt über eine Reihe von Rendering-Regeln.
Es bestimmt, wie seine untergeordneten Elemente positioniert werden sowie deren Beziehung und Interaktion mit anderen Elementen.
Blockformatierungskontexte (BFC, Formatierungskontext auf Blockebene) sind die Rendering- und Anzeigeregeln eines Elements auf Blockebene. Laienhaft ausgedrückt kann BFC als eine große geschlossene Box verstanden werden. Die Unterelemente innerhalb des Containers haben keinen Einfluss auf die Elemente außerhalb und umgekehrt.
Die Layoutregeln von BFC lauten wie folgt:
1 Die internen Boxen werden einzeln in vertikaler Richtung platziert
2 BFC ist ein isolierter unabhängiger Container die Seite;
3 Die oberen und unteren Ränder zweier benachbarter Felder, die zum selben BFC gehören, überlappen sich
4 Bei der Berechnung der Höhe des BFC werden auch schwebende Elemente berücksichtigt
5 Die linke Seite Die linke Seite jedes Elements ist in Kontakt, auch wenn es einen Float gibt BFC? Die BFC-Funktion kann ausgelöst werden, solange das Element eine der folgenden Bedingungen erfüllt:
Die Darstellung ist:
<head>
.p {
width:200px;
height:50px;
margin:50px 0;
background-color:red;
}
</head>
<body>
<p class="p"></p>
<p class="p"></p>
</body>Gemäß Artikel 3 der BFC-Regeln: 
<p class="p"></p> <p class="wrap"> <p class="p"></p> </p>
.wrap {
overflow:hidden;
.p {
width:200px;
height:50px;
margin:50px 0;
background-color:red;2 BFC kann schwebende Elemente enthalten (klares Schweben) 
Das äußere p kann das interne schwebende p nicht enthalten. Der Effekt ist in der folgenden Abbildung dargestellt:
<p style="border: 1px solid #000;">
<p style="width: 50px; height: 50px; background: #eee;
float: left;">
</p>
</p>Aber wenn wir den BFC des externen Containers auslösen, gilt gemäß Artikel 4 der BFC-Spezifikation: Bei der Berechnung der Höhe des BFC beteiligt sich auch das schwebende Element an der Berechnung, dann das externe Der p-Container kann das schwebende Element umschließen. Ändern Sie daher einfach den Code wie folgt: 
kann die folgenden Effekte erzielen:
<p style="border: 1px solid #000;overflow: hidden"> <p style="width: 100px;height: 100px;background: #eee;float: left;"></p> </p>
3 BFC kann verhindern Elemente werden nicht durch schwebende Elemente verdeckt 
Das Rendering ist:
<p class="aside"></p>
<p class="main"></p>
p {
width:300px;
}
.aside {
width: 100px;
height: 150px;
float: left;
background: black;
}
.main {
height:200px;
background-color:red;
}Der Grund Warum dies der Fall ist, liegt an Regel 5 oben: Die linke Seite jedes Elements und enthält Die linke Seite der Box ist in Kontakt, auch wenn es Float gibt 
kann auch die Eigenschaften von BFC auslösen, das heißt:
Auf diese Weise kann ein adaptives Layout von zwei Spalten implementiert werden.
.main {
overflow:hidden;
height:200px;
background-color:red;
}
Ausführliche Erklärung des wichtigen BFC in CSS
Über das Thema BFC und Höhenkollaps
Was ist BFC? Ein einfaches Verständnis von bfc
Das obige ist der detaillierte Inhalt vonAnalyse von Anwendungsbeispielen von BFC und IFC in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
