BFC-Layoutprinzip

Die ursprüngliche Absicht beim Schreiben dieses Blogs bestand tatsächlich darin, diese Methode beim Lösen von Floats zu sehen und darüber nachzudenken, was BFC ist und warum Floats gelöscht werden können. Sie erkennen das Ergebnis nicht, indem Sie es betrachten, desto weniger verstehen Sie es. Sie sollten es also sorgfältig studieren und Ihre Lernerfahrung zusammenfassen.

　1.Was ist BFC

BFC ist die Abkürzung für Box Formatting Context, wörtlich übersetzt als „Formatierungskontext auf Blockebene“.

　1.1Box ist die Grundeinheit des CSS-Layouts

Box ist das Objekt und die Grundeinheit des CSS-Layouts. Der Typ und die Anzeigeeigenschaften des Elements bestimmen den Typ der Box.

• Box auf Blockebene: Elemente mit den Anzeigeattributen Block, Listenelement und Tabelle generieren Boxen auf Blockebene. Und am Blockformatierungskontext teilnehmen;
• Box auf Inline-Ebene: Elemente mit den Anzeigeattributen „Inline“, „Inline-Block“ und „Inline-Tabelle“ generieren Boxen auf Inline-Ebene. Und am Inline-Formatierungskontext teilnehmen
• Einlaufbox
Wenn die Einlaufbox eine Blockbox enthält, wird diese Einlaufbox auch zur Blockbox

Wenn der Geschwisterknoten unmittelbar nach der Einlaufbox eine Blockbox ist, wird diese Einlaufbox als Inline-Box in dieser Blockbox verwendet. Die Einlaufbox kann nicht in eine bereits eingelaufene Box eintreten . Sie können den Block, der mit dem Feld selbst beginnt, nicht betreten

display:run-in;

innerhalb des Blocks

Ansonsten wird aus der Einlaufbox eine Blockbox

　1.2　Formatierungskontext

bezieht sich auf einen Rendering-Bereich auf der Seite und verfügt über eine Reihe von Rendering-Regeln, die die Positionierung seiner Unterelemente sowie deren Interaktion und Interaktion mit anderen Elementen bestimmen.

Die häufigsten Formatierungskontexte sind Blockformatierungskontext (kurz BFC) und Inline-Formatierungskontext (kurz IFC).

　　 1,3　BFC

Formatierungskontext auf Blockebene, der sich auf einen unabhängigen Rendering-Bereich auf Blockebene bezieht, an dem nur BOX auf Blockebene beteiligt ist. Dieser Bereich verfügt über eine Reihe von Rendering-Regeln, um das Layout von Boxen auf Blockebene einzuschränken, und hat nichts damit zu tun außerhalb des Gebietes.

　2.Generation von BFC

• Wurzelelement
• Der Wert von float ist nicht none
• Der Wert des Überlaufs ist nicht sichtbar
• Die Anzeigewerte sind Inline-Block, Tabellenzelle, Tabellenüberschrift
• Der Wert der Position ist absolut oder fest

　3.BFC-Layoutregeln

1. Die Innenboxen 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
3. Die linke Seite des Randfelds jedes Elements berührt die linke Seite des Randfelds des enthaltenden Blocks (bei Formatierung von links nach rechts, andernfalls 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 sind auch schwebende Elemente an der Berechnung beteiligt

　Einige Anwendungen von BFC

　Überlappung der vertikalen Ränder verhindern

In der obigen Regel 2 überlappen sich die Ränder zweier benachbarter Felder, die zum selben BFC gehören. Der Code und die Wirkung lauten wie folgt:

<span style="color: #0000ff"><</span><span style="color: #800000">style </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text/css"</span><span style="color: #0000ff">></span><span style="background-color: #f5f5f5; color: #800000">
    div</span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">
        width</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 100px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">
        height</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 100px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">
        margin</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 10px</span><span style="background-color: #f5f5f5; color: #000000">;</span>
    <span style="background-color: #f5f5f5; color: #000000">}</span>
<span style="color: #0000ff"></</span><span style="color: #800000">style</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">style</span><span style="color: #0000ff">="background:lightgreen;"</span><span style="color: #0000ff">></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">style</span><span style="color: #0000ff">="background:lightblue;"</span><span style="color: #0000ff">></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">style</span><span style="color: #0000ff">="background:pink;"</span><span style="color: #0000ff">></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>

 

 

 可明显看出三个div之间的magin是都是10，互相发生了重叠。那怎么避免呢，规则2说了，是处于同一个BFC的相邻box元素会发生margin重叠，那我们让他们不处于一个BFC不就行了呀，所以给div元素外加了个p标签：

 　　　　自适应两栏布局

 上述规则3中，每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

<span style="color: #0000ff"><</span><span style="color: #800000">style</span><span style="color: #0000ff">></span><span style="background-color: #f5f5f5; color: #800000"> 
    body </span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000"> 
        width</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 300px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000"> 
        position</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> relative</span><span style="background-color: #f5f5f5; color: #000000">;</span> 
    <span style="background-color: #f5f5f5; color: #000000">}</span><span style="background-color: #f5f5f5; color: #800000"> 
  
    .aside </span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000"> 
        width</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 100px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000"> 
        height</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 150px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000"> 
        float</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> left</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000"> 
        background</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> #f66</span><span style="background-color: #f5f5f5; color: #000000">;</span> 
    <span style="background-color: #f5f5f5; color: #000000">}</span><span style="background-color: #f5f5f5; color: #800000"> 
  
    .main </span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000"> 
        width</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 200px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">
        height</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 200px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000"> 
        background</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> #fcc</span><span style="background-color: #f5f5f5; color: #000000">;</span> 
    <span style="background-color: #f5f5f5; color: #000000">}</span> 
<span style="color: #0000ff"></</span><span style="color: #800000">style</span><span style="color: #0000ff">></span> 
<span style="color: #0000ff"><</span><span style="color: #800000">body</span><span style="color: #0000ff">></span> 
    <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="aside"</span><span style="color: #0000ff">></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span> 
    <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="main"</span><span style="color: #0000ff">></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span> 
<span style="color: #0000ff"></</span><span style="color: #800000">body</span><span style="color: #0000ff">></span> 

View Code

 

 

 因为上述两个元素都同处body，所以他们的左边与body相接触。

再根据规则4，BFC区域不会与float区域重叠，我们可以给main触发BFC化实现两列布局，比如给main添加overflow：hidden 效果如下：

　　　　清除浮动

 根据规则6，计算BFC的高度时，浮动元素也参与计算，因此可以根据这个规则清除浮动，如下：

<span style="color: #0000ff"><</span><span style="color: #800000">style</span><span style="color: #0000ff">></span><span style="background-color: #f5f5f5; color: #800000"> 
    .mydiv</span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">
        border</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff">3px dashed #ddd</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">
        overflow</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> hidden</span><span style="background-color: #f5f5f5; color: #000000">;</span>
    <span style="background-color: #f5f5f5; color: #000000">}</span>
<span style="color: #0000ff"></</span><span style="color: #800000">style</span><span style="color: #0000ff">></span> 
<span style="color: #0000ff"><</span><span style="color: #800000">body</span><span style="color: #0000ff">></span> 
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="mydiv"</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">p </span><span style="color: #ff0000">style</span><span style="color: #0000ff">="float:left"</span><span style="color: #0000ff">></span>我设置了float属性<span style="color: #0000ff"></</span><span style="color: #800000">p</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">body</span><span style="color: #0000ff">></span> 

 

 

 这也承接了上节float清除浮动的BFC方式的原理，实际上使元素BFC化即可，可参照BFC的生成规则。

　　5.总结

 对于BFC，我认为我们主要是想通过掌握BFC的规则来实现一些布局效果，并且利用BFC规则达到我们的各种目的，比如清除浮动，清除margin重叠等。

上述几个例子同时也说明了规则5，BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之同理。

BFC内部的元素和外部元素不会相互影响，所以这就会使BFC计算高度时会包含浮动的高度，同样也避免了margin叠加。