CSS深刻理解流體特性和BFC特性下多欄自適應佈局 深刻理解BFC 聖盃佈局以及雙飛燕佈局（柵格） haslayout詳解

1、塊狀元素的流體特性與自適應佈局

塊狀元素像放在容器中的水流同樣，內容區域會隨着margin, padding, border的出現自動填滿剩餘空間，這就是塊狀元素的流體特性。

來一個小實驗：

div {

       margin-left：100px；

       width：100%；

}

此時發現，左側永遠100px留白，而div隨着容器寬度變化而自適應變化了

咱們須要好好利用左側100px的留白間距，豈不是就能夠實現兩欄自適應效果？

爲了避免影響本來的流體特性，咱們可使用破壞性屬性，如浮動(float:left)，或者絕對定位(position:absolute)。

然而，利用塊狀元素流體特性實現的自適應佈局有個不足，就是，咱們須要知道浮動或絕對定位內容的尺寸。

而後，流體內容纔能有對應的margin或padding或border值進行位置修正。

因而，問題來了，咱們無法單純使用一個公用的類名，相似.clearfix這樣，整站通用。由於不一樣自適應場景的留白距離是不同的。

此時，咱們能夠利用塊狀元素的BFC實現更強大更智能的多欄自適應佈局（本文重點）

 

2、元素的BFC特性與自適應佈局

BFC特性不少，參考我以前的文章：深刻理解BFC

而咱們這裏，只關心一個，和float元素作相鄰兄弟時候的表現。

流體特性div, 當其和浮動元素當兄弟的時候，是覆蓋的關係（能夠腦補下文字環繞圖片效果）。

若是給div overflow：hidden，觸發bfc

普通流體元素BFC後，爲了和浮動元素不產生任何交集，順着浮動邊緣造成本身的封閉上下文

不與浮動交集，自動退避浮動元素寬度的距離，但，自己做爲普通元素的流動性依然存在

 

2. BFC自適應佈局模塊間的間距

通常而言，咱們須要一點間距。咱們的第一反應就是margin

div設置margin-left:10px     可是好像不起做用 ？ 

這裏的margin並非無效，而是值不夠大

當你設置margin-left值大於浮動元素寬度，則生效

可是這樣又回到了流體佈局，毫無成長

可是，咱們可使用浮動元素的margin-right或者padding-right輕鬆實現間距效果

還可使用BFC元素的padding-left撐開間距

 

3. BFC自適應佈局優點與純流體特性佈局相比的優點

1. 自適應內容因爲封閉，更健壯，容錯性強。比方說，內部clear:both不會與兄弟float產生矛盾。而純流體佈局，clear:both會讓後面內容沒法和float元素在一個水平上，產生布局問題。
2. 自適應內容自動填滿浮動覺得區域，無需關心浮動元素寬度，能夠整站大規模應用。而純流體佈局，須要大小不肯定的margin/padding等值撐開合適間距，沒法CSS組件化。

 

4. BFC元素家族與自適應佈局面面觀
理論上，任何BFC元素和浮動搭配，均可以實現自動填充的自適應佈局。

可是，因爲絕大多數的觸發BFC的屬性自身有一些古怪的特性，因此，實際操做的時候，能兼顧流體特性和BFC特性來實現無敵自適應佈局的屬性並很少。

下面舉一些例子：

對於，浮動(float)，絕對定位(position:absolute)以及inline-block的包裹性我稱之爲「主動包裹」，其標籤寬度會收縮至內部元素大小；

而overflow與zoom，我稱之爲「被動包裹」。

 

float:left 浮動元素自己BFC化，然而浮動元素有破壞性和包裹性，失去了元素自己的流體自適應性，所以，沒法用來實現自動填滿容器的自適應佈局。不過，其因兼容性還算良好，與堆積木這種現實認知匹配，上手簡單，所以在舊時代被大肆使用，也就是常說的「浮動佈局」，也算陰差陽錯開創了本身的一套佈局（聖盃佈局以及雙飛燕佈局（柵格））。

position:absolute 這個脫離文檔流有些嚴重，不宜使用

overflow:hidden   也就是溢出剪裁什麼的，自己仍是個很普通的元素。所以，塊狀元素的流體特性保存至關無缺，附上BFC的獨立區域特性，可謂如虎添翼，同樣。因爲不少場景咱們是不能overflow:hidden的，所以，沒法做爲一個通用CSS類整站大規模使用。所以，float+overflow的自適應佈局，咱們能夠在局部（你肯定不會有什麼被剪裁的狀況下）很happy地使用（IE6有bug不行）。

display:inline-block CSS屆最偉大的聲明之一，可是，在這裏，就有些捉襟見肘了。display:inline-block會讓元素尺寸包裹收縮，徹底就不是咱們想要的block水平的流動特性。

你們應該知道，IE6/IE7瀏覽器下，block水平的元素設置display:inline-block元素仍是block水平，也就是仍是會自適應容器的可用寬度顯示。因而，咱們就陰差陽錯獲得一個比overflow:hidden更牛逼的聲明，即BFC特性加身，又流體特性保留。

固然，*zoom: 1也是相似效果，比例縮放，跟CSS3中transform:scale差很少;不過只適用於低級的IE瀏覽器，IE8如下能夠清除浮動。（haslayout詳解）

display:table-cell 讓元素表現得像單元格同樣，IE8及以上以上瀏覽器才支持。跟display:inline-block同樣，會跟隨內部元素的寬度顯示，看樣子也是不合適的命。可是，單元格有個很是神奇的特性，就是你寬度值設置地再大，大到西伯利亞，實際寬度也不會超過表格容器的寬度。

所以，若是咱們把display:table-cell這個BFC元素寬度設置很大，比方說3000像素。那其實就跟block水平元素自動適應容器空間效果如出一轍了。除非你的容器寬度超過3000像素，實際上，通常web頁面不會有3000像素寬的模塊的。

display:table-row 對width無感，沒法自適應剩餘容器空間。

display:table-caption 一無可取……還有其餘聲明也都是一無可取，我就不所有展開了……

 

總結：咱們對BFC聲明家族大體過了一遍，能擔任自適應佈局重任的也就是：

1. overflow:auto/hidden IE7及以上
2. display:inline-block IE6/IE7
3. display:table-cell IE8及以上

 

 

參考自：http://www.zhangxinxu.com/wordpress/?p=4588