什麼是BFC

• 對css有了解的朋友確定都知道盒式模型這個概念，對一個元素設置css，首先須要知道這個元素是block仍是inline類型。而BFC就是用來格式化塊級盒子，一樣管理inline類型的盒子還有IFC，以及其餘的FC。那首先咱們就來看看FC的概念。
• Formatting Context：指頁面中一個渲染區域，而且擁有一套渲染規則，他決定了其子元素如何定位，以及與其餘元素的相互關係和做用。
• BFC：塊級格式化上下文，它是指一個獨立的塊級渲染區域，只有Block-level Box參與，該區域擁有一套渲染規則來約束塊級盒子的佈局，且與區域外部無關。

  BFC的生成

• 既然上文提到BFC是一塊渲染區域，那這塊渲染區域到底在哪，它又是有多大，這些由生成BFC的元素決定，CSS2.1中規定知足下列CSS聲明之一的元素便會生成BFC。
  • float的值不爲none；
  • overflow的值不爲visible；
  • display的值爲inline-block、table-cell、table-caption；
  • position的值爲absolute或fixed；
    看到有人把display：table也認爲能夠生成BFC，其實這裏的主要緣由在於Table會默認生成一個匿名的table-cell，正是這個匿名的table-cell生成了BFC。

BFC的約束規則

瀏覽器對於BFC這塊區域的約束規則以下：

• 生成BFC元素的子元素會一個接一個的放置。垂直方向上他們的起點是一個包含塊的頂部，倆個相鄰子元素之間垂直距離取決於元素margin特性。在BFC中相鄰的塊級元素外邊距會摺疊。
• 生成BFC元素的子元素中，每個子元素的外邊距和包含塊的左邊界相接觸，（對於從右到左的格式化，右外邊距和右邊界相接觸），除非這個子元素也建立了一個新的BFC（如它自身也是一個浮動元素）。

有朋友對它作了分解，咱們直接拿來：

1. 內部的BOX會在垂直方向上一個接一個的放置；
2. 垂直方向上的距離有margin決定。（完整的說法是：屬於同一個BFC的倆個相鄰的BOX的margin會發生重疊，與方向無關。）
3. 每一個元素的左外邊距與包含塊的左邊界相接觸（從左到右），即便浮動元素也是如此。（這說明BFC中的子元素不會超出它的包含塊，而position爲absolute的元素能夠超出它的包含塊邊界）；
4. BFC的區域不會與float的元素區域重疊；
5. 計算BFC的高度時，浮動子元素也參與計算；
6. BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素，反之亦然；

看到以上的幾條約束，讓我想起了學習CSS時的幾條規則：

• Block元素會擴展到與父元素同寬，因此block元素會垂直排列；
• 垂直方向上的倆個相鄰DIV的margin會重疊，而水平方向不會（此規則並不徹底正確）；
• 浮動元素會盡可能往左上方（或右下方）；
• 爲父元素設置overflow：hidden或浮動父元素，則會包含浮動元素；
• ……

BFC在佈局中的應用

上面說了那麼多，那麼BFC究竟有什麼用，畢竟再好的東西也要爲我所用才行。

防止margin重疊：

• 同一個BFC中倆個相鄰的box纔會發生重疊與方向無關，不過因爲上文提到的第一條限制，咱們甚少看到水平方向的margin重疊。這在IE這中是個特例，IE能夠設置write-mode。
• 要阻止margin重疊，只要將倆個元素別放在一個BFC中便可（能夠用上文提到的方式讓相鄰元素其中一個生成BFC）。阻止倆個相鄰元素的重疊看起來沒有意義，主要用於嵌套元素。

浮動相關問題；

• 使得父元素包含子元素，常見的方式是爲父元素設置overflow：hidden或者浮動父元素。根本緣由在於建立BFC的元素，子浮動元素也會參與其高度計算，即不會產生高度塌陷問題。

多欄佈局的一種方式

• 上文提到的一條規則：與浮動元素相鄰的已生成BFC的元素不能與浮動元素互相覆蓋。利用該特性能夠做爲多欄佈局的一種實現方式。
• 這種佈局的特色在於左右倆欄的寬度固定，中間欄能夠根據瀏覽器寬度自適應。
  
  
  

  多欄佈局
• IE中也有與BFC相似概念的haslayout。

總結

• 在我第一次接觸BFC時常常有一個疑問，BFC的結構是什麼樣的，像DOM同樣的樹狀結構，仍是一個BFC集合。其實咱們不須要關心BFC的具體結構，這要看瀏覽器的具體實現採用什麼樣的數據結構。對於BFC咱們只須要知道使用必定的CSS聲明能夠生成BFC，瀏覽器對生成的BFC有一系列的渲染規則，利用這些渲染規則咱們能夠達到必定的佈局效果，爲了達到特定的佈局效果咱們讓元素生成BFC。
• 對於CSS新手來講不建議涉獵BFC，仍是應該去看看相應的CSS佈局規則，像《CSS設計指南》、《CSS權威指南》這倆本都很不錯，達到必定積累再來看BFC，說不定會有一種豁然開朗的感受。BFC中幾乎涉及到CSS佈局的全部重要屬性，這也是BFC的難點和咱們須要掌握BFC的意義所在。

做者：wmsj100 連接：http://www.jianshu.com/p/76484dff1cb5 來源：簡書 著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。