---恢復內容開始---
what：
bfc:"block formatting context"
「塊及格式化上下文」，文件給出的定義很多，自己覺得就是一句話，無論內部子元素怎麼變化，都不會影響外部的元素。
表現原則：
內部的盒子會在垂直方向，乙個接乙個地放置。
盒子垂直方向的距離由margin決定。屬於同乙個bfc的兩個相鄰盒子的margin會發生重疊
每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。
bfc的區域不會與float box重疊。
bfc就是頁面上的乙個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。
計算bfc的高度時，浮動元素也參與計算
什麼時候會觸動bfc
float的值不為none
overflow的值為auto，scroll或hidden。
display的值為table-cell，table-caption，inline-block中的任何乙個。
position的值為relative或static。
bfc作用：
***自適應兩欄布局
（最簡單的實現方式，大多人想到的應該是浮動，所以請看下面演示）
此現象反映出（表現原則3）
由此可見，單單只靠浮動是不行的，要想實現自適應兩欄布局，此時應讓right盒子觸動bfc（依據表現規則4），**如下
這樣，當right盒子觸發bfc後，新的bfc不會與left盒子重疊，便實現的兩欄布局。
還沒完，這樣兩個元素緊緊的挨在一起看起來很難受，這時需設定模組間的間距，那麼這時問題來了，到底給那個盒子設定間距呢？
1，給浮動盒子設定間距。(可行方法)
成功.2，給觸發bfc的盒子設定。可以看到top盒子和bottom盒子之間的間距總共為100px，發生了margin重疊。由此，給bfc盒子設定外邊距是沒有效果的。
當然你也可以給bfc盒子設定padding，視覺上是可以出現相同效果的，但那是內邊距，也反映出bfc的原則之一（bfc就是頁面上乙個獨立的容器，容器裡面元素的任何變化不會給外面元素帶來影響）
***防止垂直margin重疊
首先來看看垂直margin重疊的效果
.test
topbottom
體現了bfc表現規則2。
一種解決辦法：用乙個盒子其中乙個元素包起來，並觸發該盒子的bfc，使例子中兩個p元素處於不同的bfc塊中。
.box如此，便可以解決margin重疊的問題。.test
top bottom
***清除內部浮動
首先來看下面的例子
怎麼來清除浮動呢？
本文依據bfc的特性，讓box盒子觸動bfc。只需新增改變以下**
.box需要注意的是box在計算高度時，內部的浮動元素test也會參與計算。
總結：由上面的例子來看，所謂bfc，其實最主要就一句話，無論內部（觸動bfc）子元素怎麼變化，都不會影響外部的元素（反之亦如此），兩欄自適應布局，margin重疊，還有清除浮動，都是這一原則的體現。
對BFC的理解
bfc塊格式化上下文 block formatting context 是web頁面的視覺化css渲染的一部分，是布局過程中生成塊級盒子的區域，也是浮動元素與其他元素的互動限定區域。通俗理解bfc是乙個獨立的布局環境，可以理解為乙個容器，在這個容器中按照一定規則進行物品擺放，並且不會影響其外部元素。...
對BFC的理解
在解釋 bfc 是什麼之前，需要先介紹 box formatting context的概念。box css布局的基本單位 box 是 css 布局的物件和基本單位，直觀點來說，就是乙個頁面是由很多個 box 組成的。元素的型別和 display 屬性，決定了這個 box 的型別。不同型別的 box，...
就針對BFC的理解
bfc是什麼？首先說一下bfc是什麼，概念從 來？bfc全稱叫做 block formatting context 中文叫塊級格式化上下文，是乙個網頁的概念。網頁是乙個乙個盒子組成的，那麼這個bfc到底有什麼用途呢？看下面具體分析。怎麼觸發bfc 根元素浮動元素 float 除 none 以外的值 ...