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:

Wissen, wie man BFC auslöst

BFC kann ausgelöst werden, wenn eine der folgenden Bedingungen erfüllt ist und sich in BFC umwandelt

Wurzelelement

Float-Attribut ist nicht „none“

Position

ist nicht statisch und relativ

Überlauf

ist nicht sichtbar

Anzeige 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 verwenden

3. 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 beteiligt

4. Funktion von BFC:

Verwenden Sie es, um zu kommen

1 .

Ränder

Überlappung

bfc verhindern, dass sich die Ränder von untergeordneten Elementen, die zum selben bfc gehören, überlappen (der Abstand in der vertikalen Richtung der Box wird durch den Rand bestimmt. Die Ränder von zwei Benachbarte 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 Abstand von 20 Pixeln. Logischerweise sollte es 40 Pixel sein, aber dies führt dazu Überlappende Ränder im BFC

Code:

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>

:

Problem: Wenn das Element a ist Untergeordnetes Element Nachdem sie alle schweben, kommt es zu einem Höhenkollaps-Phänomen, das heißt, die Höhe des übergeordneten Containers wird nicht gedehnt

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!