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

BFC kann ausgelöst und in BFC umgewandelt werden, wenn einer von Die folgenden Bedingungen sind erfüllt

Wurzelelement

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:

Die internen Boxen werden nacheinander platziert ein weiteres in vertikaler Richtung.

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)

Problem: Wie Sie auf dem Bild sehen können, gibt es zwischen String1 und String2 nur einen Rand von 20 Pixeln sollte logischerweise 40 Pixel groß sein, aber dadurch überlappen sich ihre Ränder in bfc

Code:

<style>
.container1{
        /* 通过overflow：hidden可以创建bfc */
        overflow: hidden;
        background-color: red;
        width: 300px;
    }
    .sub1{
        margin: 20px 0px;
        background-color: #dea;
    }
</style>
<p class="container1">
        <p class="sub1">String1</p>
        <p class="sub1">String2</p>
</p>

Lösung: Wir können einen Container um p wickeln und den Container auslösen, um einen BFC zu generieren. Dann gehören die beiden PS nicht zum selben BFC und es kommt nicht zu einer Randüberlappung.

Code:

2. Float löschen:

<style>
    .newbfc{
            overflow: hidden;
    }
</style>
<p class="container1">
        <p class="sub1">String1</p>
        <p class="newbfc"><p class="sub1">String2</p></p>
</p>

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:

<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>
<p class="pre2">
        <p class="float1"></p>
        <p class="float2"></p>
</p>

bfc-Regeln: Bei der Berechnung der Höhe von BFC nehmen auch schwebende Elemente an der Berechnung teil, solange Da der übergeordnete Container auf bfc eingestellt ist, können Sie untergeordnete Elemente enthalten:

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.

<style>
.container2{
        overflow: hidden;
        width: 200px;
    }
    .box{
        float: left;
        width: 100px;
        height: 30px;
        background-color: #daa;
    }
</style>
<p class="container2">
        <p class="box"></p>
        <p style="background-color: #eea">sdfadsfdff fffffffds fsfffff sfd  fsdsdfsdf fffffff</p>
</p>

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

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!