CSS深入理解流体特性和BFC特性下多栏自适应布局
一、塊狀元素的流體特性與自適應布局
塊狀元素像放在容器中的水流一樣，內容區域會隨著margin,?padding,?border的出現自動填滿剩余空間，這就是塊狀元素的流體特性。
來一個小實驗：
div {
? ? ? ?margin-left：100px；
? ? ? ?width：100%；
}
此時發現，左側永遠100px留白，而div隨著容器寬度變化而自適應變化了
我們需要好好利用左側100px的留白間距，豈不是就可以實現兩欄自適應效果？
為了不影響原本的流體特性，我們可以使用破壞性屬性，如浮動(float:left)，或者絕對定位(position:absolute)。
然而，利用塊狀元素流體特性實現的自適應布局有個不足，就是，我們需要知道浮動或絕對定位內容的尺寸。
然后，流體內容才能有對應的margin或padding或border值進行位置修正。
于是，問題來了，我們沒法單純使用一個公用的類名，類似.clearfix這樣，整站通用。因為不同自適應場景的留白距離是不一樣的。
此時，我們可以利用塊狀元素的BFC實現更強大更智能的多欄自適應布局（本文重點）
?
二、元素的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自適應布局優勢與純流體特性布局相比的優勢
?
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聲明家族大致過了一遍，能擔任自適應布局重任的也就是：
?
?
參考自：http://www.zhangxinxu.com/wordpress/?p=4588
轉載于:https://www.cnblogs.com/coderL/p/7834635.html
總結
以上是生活随笔為你收集整理的CSS深入理解流体特性和BFC特性下多栏自适应布局的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： centos7下安全访问远程服务器
- 下一篇： CSS 埋点统计