一、bfc元素簡介與基本表現。
bfc全程"block formatting context",中文為"塊級格式化上下文"。記住一句話：bfc元素特性表現原則就是，內部子元素再怎麼翻江倒海，翻雨覆雨都不會影響外部的元素。所以，避免margin穿透、清楚浮動什麼的也就好理解了。
什麼時候出發bfc呢？ 常見的情況如下：
-> float 的值不為none ;
-> overflow 的值為auto,scroll或hidden;
-> display的值為table-cell，table-caption,inline-block中的任何乙個;
-> position的值不為relative 和 static。
bfc特性很多,兒我們這裡只關心乙個，和float元素做相鄰兄弟時候的表現。
會發現，普通流體元素bfc後，為了和浮動元素不產生任何交集，順著浮動邊緣形成自己的封閉上下文。
同時，元素原本的流體特性依然保留了。哈，這個很重要，也就是，雖然不與浮動交集，自動退避浮動元素寬度的距離，但，本身作為普通元素的流動性依然存在，反映在布局上就是自動填滿除去浮動內容以外的剩餘空間。喲，這不就是自適應布局嘛！
二、bfc自適應布局木塊間的間距
說到間距，我們的第一反應就是margin. 於是，我們給bfc元素增加乙個margin-left:20px, css**如下：
.float-left.follow-content
結果……納尼~
怎麼還是像狗屁膏藥貼在一起啊？？
實際上，這裡的margin並不是無效，而是值不夠大，鞭長莫及啊！
如果按照上面的解釋，那我們把margin-left:20px改成margin-left:150px就應該有間距了？
一試便知！
注意：我這裡舉margin這個例子，不是讓大家這樣使用，只是為了讓大家可以深入理解bfc元素與浮動元素混排的特性表現。實際開發，我們完全沒有必要對bfc元素設定margin, 因為又回到了流體布局，明明是固定的15畫素間距，但是，每個布局都要寫乙個不同的margin值，完全沒有重用價值。
但是，間距部分的高潮來了！
我們可以使用浮動元素的margin-right或者padding-right輕鬆實現間距效果。間距是20畫素，直接：
.float-left與浮動元素的寬度是多少沒有任何關係。不僅如此，我們還可以使用bfc元素的
padding-left撐開間距（雖然margin-left作用雞肋）。三、與純流體特性布局的優勢
bfc自適應布局優勢我總結了下面2點：
1、自適應內容由於封閉，更健壯，容錯性強。比方說：內部clear:both不會與兄弟float產生矛盾。而純流體布局，clear:both會讓後面內容無法和float元素在乙個水平上，產生問題。布局
2、自適應內容自動填滿浮動區域，無需關心浮動元素寬度，可以整站大規模應用。而純流體布局,需要大小不確定的margin/padding等值撐開合適間距,無法css元件化。
能大能小，布局依然良好
BFC 自適應布局
bfc全稱為block formatting context，塊級上下文結構，具有bfc結構的元素的內部元素不會影響外部元素的布局和結構。bfc可以由以下幾種方式觸發 根元素float不為none overflow不為visible position除relative和static display的...
網頁布局 （bfc）自適應布局
核心思想主要是利用float margin的形式。利用塊狀元素的流體特性，然後計算出float元素的寬度，並賦予到塊狀元素的相應margin中。但是這麼做是有個缺點的，就是我們每次都得知道float元素的寬度，然後賦予到塊狀元素的margin。bfc有一特性 bfc的區域不會與外部浮動元素重疊。並且...
自適應三欄布局BFC屬性
1 自身浮動 2 雙飛翼 3 絕對定位三種都是通過設定margin值和定位屬性實現自適應三欄。這樣一旦左右兩側欄目寬度變化，就要更改margin的值，十分麻煩。但是在張鑫旭老師的 css世界 中提到一種方法，利用bfc屬性，隨意改變左右兩側的寬度，不需要改變其他值也能實現自適應三欄。具體原因可以參考...