核心思想主要是利用float+margin的形式。利用塊狀元素的流體特性，然後計算出float元素的寬度，並賦予到塊狀元素的相應margin中。但是這麼做是有個缺點的，就是我們每次都得知道float元素的寬度，然後賦予到塊狀元素的margin。
bfc有一特性：bfc的區域不會與外部浮動元素重疊。並且利用了這一特性，實現了兩欄自適應布局
例如：
如下：可以看見浮動元素（綠色方塊）與div.noramdiv元素的確木有發生重疊，並沒有加margin
上面是利用的overflow:hidden;來觸發div.normaldiv的bfc，我們學習到要觸發元素成為bfc，有如下幾種方法：
1、 float屬性不為none
2、 position為absolute或fixed
3、 overflow的值不為visible
4、 display的值為table-cell，table-caption，inline-block中的任何乙個。
拋開第三點，overflow的值不為visible，其他幾種也適合實現bfc自適應布局？
當然不是咯。
首先，針對第一點float，由於float觸發元素bfc後，自身float又帶有特性，如將元素包裹化了，破壞了塊級元素的流體性，所以不能用來自適應布局。
針對第二點position，又由於position將元素脫離文件流比較嚴重，因此，更加不能用來自適應布局。
針對，第四點中 display:table-cell，當你設定乙個比寬度無線大時，它也不會超過它容器的寬度。
那麼我們設定它的寬度為很大很大時，也就可以用來自適應布局了嘛。
對觸發bfc的方法，能用在自適應布局中的方法如下
overflow（hidden/auto）
缺點：1、 overflow:hidden當內容過多時，帶有剪裁功能
2、 overflow:auto當內容過多時，會出現滾動條
display:inline-block
缺點：只適用於ie6、7
display:table-cell
缺點：只適用於ie8+和其他瀏覽器
.floatelm.bfccontent
BFC 自適應布局
bfc全稱為block formatting context，塊級上下文結構，具有bfc結構的元素的內部元素不會影響外部元素的布局和結構。bfc可以由以下幾種方式觸發 根元素float不為none overflow不為visible position除relative和static display的...
網頁布局 自適應
css很多人都會寫也用的很溜，畢竟這是一門描述性語言，不需要太多的語法，演算法知識，上手非常容易，因此遭到很多人輕視，但用好css真的不是一件很容易的事，常見的自適應布局就很考驗技能，你不光要會寫，還得懂內在原理。前端面試都會考到聖杯布局，以前寫過很多次，但一直沒做個總結，以至於每次別人問都不能很好...
自適應三欄布局BFC屬性
1 自身浮動 2 雙飛翼 3 絕對定位三種都是通過設定margin值和定位屬性實現自適應三欄。這樣一旦左右兩側欄目寬度變化，就要更改margin的值，十分麻煩。但是在張鑫旭老師的 css世界 中提到一種方法，利用bfc屬性，隨意改變左右兩側的寬度，不需要改變其他值也能實現自適應三欄。具體原因可以參考...