Was ist ein Formatierungskontext auf Blockebene? Die Rolle der Erstellung eines Formatierungskontexts auf Blockebene (Code angehängt)

(Blockformatierungskontext) bedeutet wörtlich übersetzt „Formatierungskontext auf Blockebene“. Es handelt sich um einen unabhängigen Rendering-Bereich, an dem nur die Box auf Blockebene beteiligt ist. Er legt fest, wie die interne Box auf Blockebene angeordnet ist, und hat nichts mit der Außenseite dieses Bereichs zu tun. Wie erstellt man also einen Formatierungskontext auf Blockebene und welche Rolle spielt ein Formatierungskontext? Der folgende Artikel informiert Sie über den Formatierungskontext auf Blockebene.

Der Dokumentenfluss, über den wir oft sprechen, ist tatsächlich in drei Typen unterteilt: Positionierungsfluss, schwebender Fluss und gewöhnlicher Fluss. Der gewöhnliche Fluss bezieht sich tatsächlich auf den FC in BFC.
FC ist die Abkürzung für Formatierungskontext, was wörtlich „Formatierungskontext“ bedeutet. Es handelt sich um einen Rendering-Bereich auf der Seite. Er verfügt über eine Reihe von Rendering-Regeln, die festlegen, wie seine Unterelemente angeordnet sind und in welcher Beziehung sie zu anderen Elementen stehen. Wirkung.

Laienhaft erklärt:

BFC kann einfach als CSS-Attribut eines bestimmten Elements verstanden werden, dieses Attribut kann jedoch nicht If sein Elemente mit diesem Attribut wurden explizit vom Entwickler geändert und weisen einige Eigenschaften gegenüber internen und externen Elementen auf. Dies ist BFC.

Die auslösende Bedingung von BFC ist die Bedingung für die Erstellung eines Formatierungskontexts auf Blockebene:

==BFC kann ausgelöst werden, wenn eine der folgenden Bedingungen vorliegt ist erfüllt==

【1】Wurzelelement, also HTML-Element

【2】Der Wert von float ist nicht none

【3】Der Wert von overflow ist nicht sichtbar

【4】Der Wert der Anzeige ist Inline-Block, Tabellenzelle, Tabellenüberschrift

【5】Der Wert der Position ist absolut oder fest

Regeln zum Erstellen des Formatierungskontexts (BFC):

1. Die internen Boxen werden nacheinander in vertikaler Richtung platziert.

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

3 Die linke Seite der Randbox jedes Elements steht in Kontakt mit der linken Seite der umgebenden Blockrandbox (für Links-nach- richtige Formatierung, sonst ist das Gegenteil der Fall). Dies gilt auch dann, wenn Float vorhanden ist.

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

5.BFC ist ein isolierter und unabhängiger Container auf der Seite. Die Unterelemente innerhalb des Containers haben keinen Einfluss auf die Elemente außerhalb. Und umgekehrt.

6. Bei der Berechnung der BFC-Höhe werden auch schwebende Elemente berücksichtigt.

BFC-Layoutregel 1: Interne Boxen werden nacheinander in vertikaler Richtung platziert.

Die Box, über die wir normalerweise sprechen, besteht aus Rand, Rand, Polsterung und Inhalt. Tatsächlich definieren die vier Seiten jedes Typs eine Box, nämlich Inhaltsbox, Füllbox, Randbox und Randbox Arten von Boxen existieren immer, auch wenn ihr Wert 0 ist. Die Randbox bestimmt den vertikalen Abstand zwischen einer Blockbox und benachbarten Blockboxen im enthaltenden Block.

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

Was den vertikalen Abstand zwischen der Blockbox und der benachbarten Blockbox im enthaltenden Block bestimmt, ist die Randbox

BFC-Layoutregel 3: Die linke Seite der Randbox jedes Elements und der umschließende Block Die linken Seiten der Rahmenfelder berühren sich (bei Formatierung von links nach rechts, andernfalls ist das Gegenteil der Fall). Dies gilt auch dann, wenn Float vorhanden ist.

<div class="parent">
    <div class="child"></div>    //给这两个子div加浮动，浮动的结果，如果没有清除浮动的话，父div不会将下面两个div包裹，但还是在父div的范围之内。
    <div class="child"></div>
</div>

Analyse: Floats zu den beiden untergeordneten ps hinzufügen. Das Ergebnis der Floats ist, dass das übergeordnete p die folgenden zwei ps nicht umschließt, sie aber immer noch innerhalb des Bereichs liegen des übergeordneten p. Die linke Seite des untergeordneten p berührt die linke Seite der Borderbox des übergeordneten p, und die schwebende rechte Seite bedeutet, dass das untergeordnete p die rechte Seite der Borderbox des übergeordneten p berührt eingestellt ist, um den Abstand zu vergrößern, ist diese Regel immer dieselbe.

BFC-Layoutregel 4: Der BFC-Bereich überlappt nicht mit der Float-Box:

<div class="aside"></div><div class="text">
    <div class="main"></div></div><!--下面是css代码-->
 .aside {            
 width: 100px;            
 height: 150px;            
 float: left;            
 background: #f66;
        }
  .main {            
  height: 200px;            
  overflow: hidden;//触发main盒子的BFC            
  background: #fcc;
        }
  .text{            
  width: 500px;
    }

Die obige Nebenbox hat ein Floating-Attribut, das den Inhalt der Hauptbox und der Hauptbox abdeckt löscht das Nebenfeld nicht. Es ist nur eine Aktion erforderlich, nämlich das Auslösen seines eigenen BFC, und dann ist es nicht mehr von der Nebenbox abgedeckt. Deshalb: Der BFC-Bereich überschneidet sich nicht mit der Float-Box.

Was sind die Funktionen von BFC:

1. Adaptives zweispaltiges Layout

2. Kann verhindern, dass Elemente durch schwebende Elemente verdeckt werden

3. Kann Floating-Elemente enthalten – interne Floats löschen

4. Kann Randüberlappungen verhindern, wenn sie zu verschiedenen BFCs gehören

BFC-Funktion 1: Adaptives zweispaltiges Layout

Es ist immer noch der obige Code. Zu diesem Zeitpunkt überlappt der BFC-Bereich die Float-Box nicht, sodass die Breite basierend auf der Breite des enthaltenden Blocks (übergeordnetes p) und der Breite angepasst wird von beiseite.

BFC und Layout

IE kann als seltsamer Browser den BFC-Standard nicht Schritt für Schritt unterstützen, daher gibt es Layout im IE. Layout und BFC Grundsätzlich gleichwertig: Um die IE-Kompatibilität zu gewährleisten, müssen wir, wenn wir BFC auslösen müssen, zusätzlich zur Verwendung der CSS-Eigenschaften in der Auslösebedingung zum Auslösen von BFC auch auf den IE abzielen Der Browser verwendet Zoom: 1, um das Layout des IE-Browsers auszulösen.

.parent {
            margin-top: 3rem;
            border: 5px solid #fcc;
            width: 300px;
        }
.child {
            border: 5px solid #f66;
            width:100px;
            height: 100px;
            float: left;
        }

BFC-Funktion 3: kann schwebende Elemente enthalten – interne Gleitkommazahlen löschen

Überlauf hinzufügen: versteckt zum übergeordneten pparent;
Floating-Prinzip löschen: übergeordnetes Element auslösen Der BFC Attribut von p macht das folgende untergeordnete p im selben BFC-Bereich des übergeordneten p. Zu diesem Zeitpunkt wurde der Float erfolgreich gelöscht.
Sie können auch in die gleiche Richtung schweben, um den Zweck des Löschens des Floats zu erreichen Das Prinzip besteht darin, dass sich beide ps im selben schwebenden BFC-Bereich befinden

BFC-Funktion 4: Randüberlappung verhindern:

Wenn zwei benachbarte untergeordnete Elemente auf Blockebene vorhanden sind Wenn Sie zu verschiedenen BFCs gehören, können Sie Randüberlappungen verhindern
Operationsmethode: Wickeln Sie ein p mit einem p ein und lösen Sie dann den BFC des äußeren p aus, um zu verhindern, dass sich die Ränder der beiden ps überlappen

<div class="aside"></div><div class="text">
    <div class="main"></div></div><!--下面是css代码-->
 .aside {
            margin-bottom: 100px;//margin属性            
            width: 100px;            
            height: 150px;            
            background: #f66;
        }
        .main {
            margin-top: 100px;//margin属性            
            height: 200px;            
            background: #fcc;
        }
         .text{            
         /*盒子main的外面包一个div，通过改变此div的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠*/            
         overflow: hidden;//此时已经触发了BFC属性。
        }

Verwandte Empfehlungen :

Wie erstelle ich einen Formatierungskontext auf Blockebene? Die Rolle des Formatierungskontexts auf Blockebene

Was sind die Formatierungskontexttypen (FC) im CSS-Layout?

Das obige ist der detaillierte Inhalt vonWas ist ein Formatierungskontext auf Blockebene? Die Rolle der Erstellung eines Formatierungskontexts auf Blockebene (Code angehängt). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!