BFC佈局原理

寫這篇部落格的初衷其實是在解決浮動的時候看到的這個方法，就想著BFC是什麼，為什麼可以清除浮動。結果不看不知道，一看越不明白，潛下心來研究看看，總結一下學習心得。

 　　1.BFC是什麼

BFC就是Box Formatting Context的簡稱，直譯為"區塊級格式化上下文"。

　　　1.1　Box是css佈局的基本單位

Box是CSS佈局的物件和基本單位，元素的類型和display特性，決定了Box的類型，不同類型的盒子決定了頁面不同的佈局形式

• block-level box:display 屬性為 block, list-item, table 的元素，會產生 block-level box。並參與 block fomatting context；
• inline-level box:display 屬性為 inline, inline-block, inline-table 的元素，會產生 inline-level box。並參與 inline formatting context；
• run-in box
如果 run-in box 包含 block box，那麼這個 run-in box 也成為 block box

 

如果緊接在 run-in box 之後的兄弟節點是 block box，那麼這個 run-in box 就會做為此 block box 裡的 inline box，run-in box 就不能進入已經一個已經以 run-inbox 開頭的區塊內，也不能進入本身就是 

display:run-in;

 的塊內

否則，run-in box 成為 block box

　　　　1.2　Formatting Context

指頁面中的一個渲染區域，並且擁有一套渲染規則，他決定了其子元素如何定位，以及與其他元素的相互關係和作用。

最常見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。

　 　　  1.3　BFC

區塊層級格式化上下文，它是指一個獨立的區塊級渲染區域，只有Block-level BOX參與，該區域擁有一套渲染規則來約束區塊級盒子的佈局，且與區域外部無關。

　　　2.BFC的生成

• 根元素
• float的值不為none
• overflow的值不為visible
• display的值為inline-block、table-cell、table-caption
• position的值為absolute或fixed

　　　3.BFC的版面規則

1. 內部的Box會在垂直方向，一個接一個地放置。
2. Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
3. 每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。
4. BFC的區域不會與float box重疊。
5. BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。
6. 計算BFC的高度時，浮動元素也參與計算

　　　4.BFC的一些應用

　　　　防止垂直 margin 重疊

上述規則2中，屬於同一個BFC的兩個相鄰Box的margin會發生重疊，代碼及效果如下：

 

<span style="color: #0000ff"><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 style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><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 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 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></span></span></span></span></span>

 

 

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

 　　　　自适应两栏布局

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

<span style="color: #0000ff"><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 style="color: #800000">body</span><span style="color: #0000ff">></span> 
    <span style="color: #0000ff"><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 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> </span></span></span></span>

View Code

 

 

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

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

　　　　清除浮动

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

<span style="color: #0000ff"><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 style="color: #800000">body</span><span style="color: #0000ff">></span> 
<span style="color: #0000ff"><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 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> </span></span></span></span>

 

 

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

　　5.总结

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

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

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