前端7班+余愿

鑒于我對BFC的理解難度，我覺得有必要把我的理解過程記錄并保存下來，以后忘了可以隨時來翻翻，也可以為跟我一樣的前端小白做一個小的參考（雖然我也并沒有完全理解透徹。。。）。
首先，什么是BFC。w3c上面的解釋是一串英文，我們直接看翻譯過來的。。。翻譯過來是：浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級盒子，都會為他們的內(nèi)容創(chuàng)建新的塊級格式化上下文。
在一個塊級格式化上下文里，盒子從包含塊的頂端開始垂直地一個接一個地排列，兩個盒子之間的垂直的間隙是由他們的margin 值所決定的。兩個相鄰的塊級盒子的垂直外邊距會發(fā)生疊加。
在塊級格式化上下文中，每一個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對于從右到左的格式來說，則觸碰到右邊緣），即使存在浮動也是如此，除非這個盒子創(chuàng)建一個新的塊級格式化上下文。
這種概念類的解釋文字，肯定不好理解，因為我自己就不理解。查資料看別人的理解用通俗易懂的話來講就是3點，首先得明白BFC有什么作用，就是我們想要用BFC實現(xiàn)什么樣的效果。
BFC的作用：
1，用來清除浮動。
2，用來布局
3，解決margin疊加問題。
明白了BFC有什么作用之后，再來想如何生成BFC。滿足以下任何一點，都可以生成bfc：
1，float 除了none以外的值
2，overflow 除了visible 以外的值（hidden，auto，scroll ）
3，display (table-cell，table-caption，inline-block, flex, inline-flex)
4，position值為（absolute，fixed）
5，fieldset元素（這是一個html標簽，它將表單內(nèi)容的一部分打包，生成一組相關(guān)表單的字段。）
知道這些之后，也需要知道以下BFC的特性：
1，內(nèi)部的Box會在垂直方向，從頂部開始一個接一個地放置。
2，Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生疊加
3，每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
4，BFC的區(qū)域不會與float box疊加。
5，BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素，反之亦然。
6，計算BFC的高度時，浮動元素也參與計算。
基本上了解這么多，就能簡單的用一用BFC了，如果還要深入了解，可以多翻翻資料多多練習(xí)~

文章參考鏈接：http://dyygtfx.com/3942.html