首先我們看看w3c對BFC是怎麼定義的:
　　Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
　　In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the ‘margin’ properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.
　　In a block formatting context, each box’s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box’s line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

　　浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級盒子，都會為他們的內容建立新的塊級格式化上下文。
　　在一個塊級格式化上下文裡，盒子從包含塊的頂端開始垂直地一個接一個地排列，兩個盒子之間的垂直的間隙是由他們的margin 值所決定的。兩個相鄰的塊級盒子的垂直外邊距會發生疊加。
在塊級格式化上下文中，每一個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對於從右到左的格式來說，則觸碰到右邊緣），即使存在浮動也是如此，除非這個盒子建立一個新的塊級格式化上下文。
　　從上面我們還可找出幾個幾個比較重要的概念東西，比如:boxe , block formatting context。毫無疑問BFC就是block formatting context的縮寫，中文就是“塊級格式化上下文”的意思。我們在那個w3c那個頁面發現還有其他inline formatting context，所以我們可以看看 formatting context是個什麼東西：
Formatting context是W3C CSS2.1規範中的一個概念。它是頁面中的一塊渲染區域，並且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關係和相互作用。
　　最常見的Formatting context有Block fomatting context(簡稱BFC)和Inline formatting context(簡稱IFC)。CSS2.1 中只有BFC和IFC, CSS3中還增加了GFC和FFC.
　　至於那個box還要講嗎？嗯，還是回顧一下：
　　Box是CSS佈局的物件和基本單位， 直觀點來說，就是一個頁面是由很多個Box(即boxes)組成的。元素的型別和display屬性，決定了這個Box的型別。 不同型別的Box， 會參與不同的Formatting context(一個決定如何渲染文件的容器)，因此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。
　　這裡我們也通俗的理解一下：
　　BFC就是“塊級格式化上下文”的意思，建立了 BFC的元素就是一個獨立的盒子，不過只有Block-level box可以參與建立BFC， 它規定了內部的Block-level Box如何佈局，並且與這個獨立盒子裡的佈局不受外部影響，當然它也不會影響到外面的元素。

　　

BFC有一下特性：

　　1. 內部的Box會在垂直方向，從頂部開始一個接一個地放置。
　　2. Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生疊加
　　3. 每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。
　　4. BFC的區域不會與float box疊加。
　　5. BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素，反之亦然。
　　6. 計算BFC的高度時，浮動元素也參與計算。
　　到最後我就是考慮How了，不用說你也知道了，就是怎麼解決這些問題，這些知識點該怎麼用，還有沒有其他的方法..
　　

那麼我們該怎麼使用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元素
　　在以上的情況裡可以建立BFC。
　　

接下我們看下怎麼運用BFC，在哪些場景可以用到BFC.

　　

1.解決margin疊加問題

　　三P每個p之間的距離為50px，發生了外邊距疊加。 要解決這個疊加問題即讓每個P之間是100px，我們可以新建一個BFC，怎麼建呢？可以給p元素新增一個父元素，讓它觸發BFC。如下:
　　

2.用於佈局

　　從圖中我們會發現上面BFC的第三個特性，就是元素的左外邊距會觸碰到包含塊容器的做外邊框，就算存在浮動也會如此。那麼我們如何解決這個問題呢？看上面BFC第四個特性，就是BFC不會與浮動盒子疊加，那麼我們是不是可以建立一個新的BFC來解決這個問題呢？來看看： 發現我們用overflow:hidden觸發main元素的BFC之後，效果立馬出現了,一個兩欄佈局就這麼妥妥的搞掂…
　　

3.用於清除浮動，計算BFC高度.

　　因為上面第六個特性提到計算BFC高度時，浮動元素也會參與計算，我們先看一個例子： 我們發現由於裡面兩個子元素浮動的關係，兩個box已經脫離了父元素的包含塊，父元素高度已經塌陷，我們需要讓父元素包含兩個box子元素，這樣計算高度時，兩個浮動子元素就會參與，所以我們要閉合浮動，觸發父元素的BFC，我們還是繼續用overflow:hidden來看看效果吧：
　　怎麼樣，效果還很明顯的嗎，當然清理(閉合)浮動還有很多方法，大家可以看看一絲大神寫的那些年我們一起清除過的浮動。 好了寫到這裡基本才不多了，BFC是個很奇怪的東西，她一直隱式的存在我們的css樣式裡，但是我們要記住BFC是頁面元素裡一個獨立存在作用塊，它不影響它外面的佈局，外面的元素也不會影響到BFC裡面的佈局。