1.背景介紹
BFC全稱是Block Formatting Context，是CSS2.1規(guī)范定義的，關于CSS渲染定位的一個概念。它的定位體系屬于常規(guī)文檔流。BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區(qū)域，只有Block-level box參與，它規(guī)定了內部的Block-level Box如何布局，并且與這個區(qū)域外部毫不相干。要理解BFC，先了解視覺格式化模型。
視覺格式化模型(visual formatting model)，是CSS中的一個概念,用來處理文檔并將它顯示在視覺媒體上的機制。 我們常說的盒模型只是CSS視覺格式化的一部分。Box 是 CSS 布局的對象和基本單位，一個頁面可以想象成由很多個 Box 組成的。元素的類型和 display 屬性，決定了這個 Box 的類型。 不同類型的 Box， 會參與不同的 Formatting Context（格式化上下文），? ?因此Box內的元素會以不同的方式渲染。BFC是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，? 它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。
最常見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。
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；
2.知識剖析
BFC（ Block formatting contexts）的布局規(guī)則
1. 在BFC中的盒子是block-level box，其排列方式是從包含塊頂部開始，垂直向下排列。
2.相鄰兩個盒子之間的垂直間距由margin決定，在一個BFC內部的兩個block-level box之間的垂直margin是折疊的。
3. BFC的區(qū)域不會與float box重疊。內部元素不受外部元素影響
4.計算BFC的高度時，考慮BFC所包含的所有元素，連浮動元素也參與計算。
5.浮動的BOX區(qū)域不會疊加到BFC上。
6.參與BFC的布局的只有普通文檔流normal flow中的塊級盒，而float、position值不為relative\static的元素不參與BFC的布局。
BFC的范圍
MDN 對BFC范圍的描述是：
A block formatting context contains everything inside of the element
creating it that is not also inside a descendant element that creates a new block formatting
context.
意思一個BFC包含創(chuàng)建該上下文元素的所有子元素，但不包括創(chuàng)建了新BFC的子元素的內部元素。就是說一個BFC中，如果一個子元素觸發(fā)了BFC 那么這個子元素內部的元素不受外部BFC的影響。這就是BFC的一個重要屬性，讓處于BFC內部的元素與外部的元素相互隔離，使內外元素的定位不會相互影響。BFC的這個特性通常用于清除浮動元素的影響
3.常見問題
3.1 如何觸發(fā)BFC？
3.2 BFC的作用
4 解決方案
4.1創(chuàng)建BFC
BFC的創(chuàng)建方法
1.根元素；
2.浮動 (元素的float不為none)；
3.絕對定位元素 (元素的position為absolute或fixed)；
4.行內塊inline-blocks(元素的 display: inline-block)；
5.表格單元格(元素的display: table-cell，HTML表格單元格默認屬性)；
6. overflow的值不為visible的元素；
7.彈性盒 flex boxes (元素的display: flex或inline-flex)；
其中，最常見的就是overflow:hidden; float:left/right; position:absolute。也就是說，當這些屬性出現的時候，表示該元素創(chuàng)建了一個BFC。
4.2 BFC的作用
1、消除浮動元素對非非浮動元素的影響
2、清除內部浮動
3、防止垂直 margin 重疊。
相鄰塊盒子的垂直外邊距折疊只有他們是在同一BFC時才會發(fā)生。如果他們屬于不同的BFC，他們之間的外邊距將不會折疊
5.編碼實戰(zhàn)
1、消除浮動元素對非非浮動元素的影響，看下面的例子，沒有創(chuàng)建BFC的情況
main{
/*position:absolute;*/
/*display: inline-block;*/
/*display: table;*/
/*display: flex;*/
/*overflow: hidden;*/
width:1000px;
margin:0auto;
background-color:gainsboro;
border:solid1px;
}
.left{
float:left;
/*margin: 50px 0;*/
width:200px;
height:200px;
background-color:rgba(86,251,166,.5);
}
.right{
/*overflow: hidden;*/
/*float: left;*/
/*margin: 50px 0;*/
width:500px;
background-color:#fff965;
}
.collapse{
/*overflow: hidden;*/
}
我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字
我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字
我們看到浮動盒子覆蓋在非浮動盒子上，父元素高度塌陷（沒有包圍浮動元素）。如果給父元素一個overflow：hidden（創(chuàng)建BFC），看看什么情況
main{
/*position:absolute;*/
/*display: inline-block;*/
/*display: table;*/
/*display: flex;*/
overflow:hidden;
width:1000px;
margin:0auto;
background-color:gainsboro;
border:solid1px;
}
父元素將浮動元素包裹起來了，恢復了高度。
2、我們再給右邊盒子創(chuàng)建BFC ，看看是什么情況
.right{
overflow:hidden;
/*float: left;*/
/*margin: 50px 0;*/
width:500px;
background-color:#fff965;
}
3、BFC防止垂直 margin 重疊的作用。
沒有BFC的情況下兩個元素的上下外邊距是折疊的，值取最大的一個?？聪旅胬樱?/p>
.left{
/*float: left;*/
margin:50px0;
width:200px;
height:100px;
background-color:rgba(86,251,166,.5);
}
.right{
overflow:hidden;
/*float: left;*/
margin:50px0;
width:500px;
background-color:yellow;
}
我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字
我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字
我們看到類為right的元素也觸發(fā)了BFC（overflow:hidden;）但是沒有消除兩個元素的外邊距折疊。我們在回顧一下BFC的特性：處于BFC內部的元素與外部的元素相互隔離，使內外元素的定位不會相互影響。也就是BFC用于消除內部元素與外部元素的相互影響。處于同級的BFC就沒有這個特性。如果在類為right元素外部包裹一個BFC元素，給類為collapse? 的盒子一個overflow：hidden（創(chuàng)建BFC），看看什么情況
我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字
我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字
.collapse{
overflow:hidden;
}
現在另個盒子外邊距分離了。
總結一下
元素創(chuàng)建BFC后有如下的效果
1、消除浮動元素對非非浮動元素的影響
2、清除內部浮動
3、防止垂直 margin 重疊。
6.擴展思考
不同條件觸發(fā)BFC產生的效果是否一樣？
display：flex，屬性創(chuàng)建的BFC會讓內部子元素也繼承BFC，其他條件是一樣的效果。
7.參考文獻
參考1：http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
參考2：http://web.jobbole.com/84808
參考3：http://www.cnblogs.com/elcarim5efil/p/4745796.html
參考4：http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
