針對BFC的特性之一：BFC之間互不影響原則，so，我們可以實現超級無敵的寬度自適應佈局。詳情見隨筆
說到自適應佈局，我們曾在“拋磚引玉之寬度自適應佈局”一文中學習過。當時的核心思想主要是利用float+margin的形式。利用塊狀元素的流體特性，然後計算出float元素的寬度，並賦予到塊狀元素的相應margin中。但是這麼做是有個缺點的，就是我們每次都得知道float元素的寬度，然後賦予到塊狀元素的margin。
然而，我們在”BFC之淺析篇”中學習到BFC有一特性：BFC的區域不會與外部浮動元素重疊。並且利用了這一特性，實現了兩欄自適應佈局。我們再來回顧下。
<!DOCTYPE html> <head> <title>BFC</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> .leftDiv { width:100px; height:100px; background:green; float:left; } .normalDiv { height:100px; background:pink; /*添加overflow:hidden，觸發元素BFC*/ overflow:hidden; } </style> </head> <body> <div class="leftDiv"></div> <div class="normalDiv"> </div> </body> </html>
運行代碼，截圖為下
可以看見浮動元素（綠色方塊）與div.noramDiv元素的確木有發生重疊，而且我也沒有加margin哦。
你也可以自己運行下上述代碼，伸縮頁面寬度，可以發現也的確是自適應滴。
（PS：上面所示的BFC實現兩欄自適應的例子，可以和“float實例講解”對比學習下，效果會更加哦。）
我們上面是利用的overflow:hidden;來觸發div.normalDiv的BFC。在“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，當你設置一個比寬度無線大時，它也不會超過它容器的寬度。
嘖嘖嘖！這不就完美了麽。那麼我們設置它的寬度為很大很大時，也就可以用來自適應佈局了嘛。
看看如下代碼
<!DOCTYPE html> <head> <title>BFC</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> .leftDiv { width:100px; height:100px; background:green; float:left; } .normalDiv { height:100px; background:pink; /*添加display:table-cell，且將寬度設置為很大，如9000px*/ display:table-cell; width:9000px; } </style> </head> <body> <div class="leftDiv"></div> <div class="normalDiv"></div> </body> </html>View Code
運行代碼後，效果圖見上。
ps:自己運行後的體會更深哦，然後伸縮瀏覽器，哈哈哈，試了就知道，是可以的哦。
針對第四點中的display:table-caption，直接濾過！
針對第四點鐘的display:inline-block，由於和float一樣具有包裹性，所以濾過。但是，我們曾在"BFC之清除浮動篇&clear"中提到過IE6、7有個hasLayout嘛，在IE6、7中它可是具有流體特性的哦。所以可以解決IE6、7的自適應佈局。代碼如下
.floatElm { float: left; } .bftContent { display: inline-block; }
so， 對觸發BFC的方法，能用在自適應佈局中的方法如下
|
overflow（hidden/auto） |
缺點： 1、 overflow:hidden當內容過多時，帶有剪裁功能 2、 overflow:auto當內容過多時，會出現滾動條 |
|
display:inline-block |
缺點： 只適用於IE6、7 |
|
display:table-cell |
缺點： 只適用於IE8+和其他瀏覽器 |
終上所述，我們可以得到利用BFC實現自適應佈局的通用方法如下：
.floatElm { float:left; } .bfcContent { display:table-cell; width:9000px;/*寬度大到屏幕寬度即可*/ /*hack手段，針對IE6、7*/ *display:inline-block; *width:auto; }
好了，我們利用這個方法來實現實現三欄佈局玩玩。代碼如下：
<!-- 左右寬度為100px，中間自適應 --> <!DOCTYPE html> <head> <title>BFC</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> .floatLeft,.floatRight { width:100px; height:100px; } .floatLeft { /*左浮動觸發BFC*/ float:left; background:green; } .floatRight { /*右浮動觸發BFC*/ float:right; background:yellow; } .bfcContent { /*table-cell觸發BFC*/ display:table-cell; width:9000px;/*寬度大到屏幕寬度即可*/ /*hack手段，針對IE6、7*/ *display:inline-block; *width:auto; height:100px; background:pink; } </style> </head> <body> <div class="floatLeft"></div> <div class="floatRight"></div> <div class="bfcContent bfcContentStl"></div> </body> </html>View Code
不信，自己運行代碼，拉動瀏覽器看看啦。
