CSS中塊級格式化上下文（BFC）的特性與應用

1、何爲BFC

塊級格式化上下文（Block Formatting Context）是網頁CSS視覺渲染的一部分，並用於決定盒子的佈局。在定位體系中屬於常規流(Normal Flow)（另外兩種定位體系爲浮動(Floats)和絕對定位(Absolute Positioning)）。

2、BFC如何造成

BFC的造成，根據W3C所言：

浮動、絕對定位元素（position 爲 absolute 或 fixed）、行內塊元素 display:inline-block、表格單元格display:table-cell、表格標題 display:table-caption 以及 overflow 屬性值不爲 visible 的元素（除了該值被傳播到視點 viewport 的狀況）將建立一個新的塊級格式化上下文。

通俗理解的話，一個BFC元素至少知足一下條件中的一個：

1.float的值不爲none

2.position的值不爲static或relative

3.display的值爲table-cell、table-caption、inline-block、flex或inline-flex

4.overflow的值不爲visiable

知足以上條件的元素將有BFC元素的一些特性，理解並掌握這些特性可讓你在CSS佈局中更加駕輕就熟，也能夠從根源上理解一些常見代碼實現效果的原理，如清除浮動，自適應佈局等。

3、BFC有什麼特性

1.BFC中盒子對齊

W3C規範中寫到：

在BFC上下文中，每一個盒子的左外側緊貼包含塊的左側（從右到左的格式裏，則爲盒子右外側緊貼包含塊右側），甚至有浮動也是如此（儘管盒子裏的行盒子 Line Box 可能因爲浮動而變窄），除非盒子建立了一個新的BFC（在這種狀況下盒子自己可能因爲浮動而變窄）。

如圖所示，全部BFC的盒子都會遵循左對齊的的對齊方式。

2.關於外邊距摺疊

你們應該知道，標準文檔流的同胞元素在豎直方向上會發生外邊距摺疊的現象，以下圖

A的下邊距爲100px，B的上邊距爲50px，發生外邊距摺疊後A、B豎直間距爲50xp。（更多外邊距摺疊問題後面會有博客專題）

一個BFC盒子與它的子元素之間不會發生外邊距摺疊。可是同一個BFC盒子內部的子元素之間也是會發生外邊距摺疊的，以下圖：

可若是爲其中一個子元素建立一個新的BFC（不一樣於父元素那個BFC盒子），讓這些子元素分屬於不一樣的BFC，他們之間就不會發生外邊距摺疊了，以下圖：

HTML爲：

<div class="container">
    <p>Sibling 1</p>
    <p>Sibling 2</p>
    <div class="newBFC">
        <p>Sibling 3</p>
    </div>
</div>

CSS爲：

.container {
    background-color: red;
    overflow: hidden; /* creates a block formatting context */
}
p {
    margin: 10px 0;
    background-color: lightgreen;
}
.newBFC {
    overflow: hidden;  /* creates new block formatting context */
}

3.BFC內外元素互不影響

這條通俗來說就是：不管BFC內部元素如何佈局——浮動、絕對定位或是其餘，都不會對BFC盒子外的其餘盒子的佈局形成影響，同時，外部元素也不會影響BFC內部元素的佈局。這個特性用途很廣，也解釋了爲什麼BFC能夠清除浮動了。

4、如何應用BFC

BFC的特性是不少CSS規範背後的原理，掌握這些特性，反過來應用它們就能夠實現不少效果：

1、使用BFC避免外邊距摺疊

BFC特性2中的實例就實現了這個特性的反向應用。

2、使用BFC清除浮動

因爲特性3，咱們只須要用BFC包含浮動塊就能夠達到清除浮動影響的效果，也就是讓包含浮動的父元素BFC化，這就是好幾種清除浮動方法的根本原理：

1.設置父元素也浮動；

2.設置父元素的display爲table(不經常使用)；

3.設置父元素overflow：hidden/auto；

都是讓父元素BFC化，來清除對BFC外元素的影響。（下一篇博客將總結各類清除浮動的方法）

3、使用BFC避免文字環繞效果

大部分時候咱們並不須要浮動帶來的文字環繞效果（這個現象是因爲特性1，詳細解釋可參考http://web.jobbole.com/83149/），用BFC來清除這個效果是個不錯的選擇。以下圖：

咱們將文字部分的包含塊設置overflow：hidden就能夠實現清除文環繞了。

4、多列布局與自適應佈局

多列布局：

若是咱們建立一個佔滿整個容器寬度的多列布局，在某些瀏覽器中最後一列有時候會掉到下一行。這多是由於瀏覽器四捨五入了列寬從而全部列的總寬度會超出容器。但若是咱們在多列布局中的最後一列裏建立一個新的BFC，它將老是佔據其餘列先佔位完畢後剩下的空間。（對於多列布局這不必定是個好辦法，在實際應用中更推薦使用彈性盒子或者用最後一個盒子margin負值來解決。）

自適應佈局：

相似應用三的例子中，若是設置右邊浮動元素margin-right（或左邊BFC元素margin-left）爲必定值，就實現了左右兩列的自適應佈局，不管左右兩部分width怎麼變化，均可以保持很好的佈局情況而不會亂掉，這種狀況下BFC的設置方法能夠是：

1.overflow：auto/hidden;   IE7+

2.display:inline-block;   IE6/IE7

3.display:table-cell;     IE8+

5、最後

本文參考了好幾篇博文，原文中關於用法或原理有更詳盡的解釋，下面貼出地址：

張鑫旭 CSS深刻理解流體特性和BFC特性下多欄自適應佈局

http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/

理解CSS中的塊級格式化上下文

http://web.jobbole.com/83149/

仍是那句話，感謝前人栽陰！