一、塊狀元素的流體特性與自適應(yīng)布局

塊狀元素像放在容器中的水流一樣，內(nèi)容區(qū)域會隨著margin,?padding,?border的出現(xiàn)自動填滿剩余空間，這就是塊狀元素的流體特性。

來一個小實(shí)驗：

div {

? ? ? ?margin-left：100px；

? ? ? ?width：100%；

}

此時發(fā)現(xiàn)，左側(cè)永遠(yuǎn)100px留白，而div隨著容器寬度變化而自適應(yīng)變化了

我們需要好好利用左側(cè)100px的留白間距，豈不是就可以實(shí)現(xiàn)兩欄自適應(yīng)效果？

為了不影響原本的流體特性，我們可以使用破壞性屬性，如浮動(float:left)，或者絕對定位(position:absolute)。

然而，利用塊狀元素流體特性實(shí)現(xiàn)的自適應(yīng)布局有個不足，就是，我們需要知道浮動或絕對定位內(nèi)容的尺寸。

然后，流體內(nèi)容才能有對應(yīng)的margin或padding或border值進(jìn)行位置修正。

于是，問題來了，我們沒法單純使用一個公用的類名，類似.clearfix這樣，整站通用。因為不同自適應(yīng)場景的留白距離是不一樣的。

此時，我們可以利用塊狀元素的BFC實(shí)現(xiàn)更強(qiáng)大更智能的多欄自適應(yīng)布局（本文重點(diǎn)）

?

二、元素的BFC特性與自適應(yīng)布局

BFC特性很多，參考我之前的文章：深入理解BFC

而我們這里，只關(guān)心一個，和float元素做相鄰兄弟時候的表現(xiàn)。

流體特性div, 當(dāng)其和浮動元素當(dāng)兄弟的時候，是覆蓋的關(guān)系（可以腦補(bǔ)下文字環(huán)繞圖片效果）。

如果給div overflow：hidden，觸發(fā)bfc

普通流體元素BFC后，為了和浮動元素不產(chǎn)生任何交集，順著浮動邊緣形成自己的封閉上下文

不與浮動交集，自動退避浮動元素寬度的距離，但，本身作為普通元素的流動性依然存在

?

2. BFC自適應(yīng)布局模塊間的間距

一般而言，我們需要一點(diǎn)間距。我們的第一反應(yīng)就是margin

div設(shè)置margin-left:10px? ? ?但是好像不起作用 ？?

這里的margin并不是無效，而是值不夠大

當(dāng)你設(shè)置margin-left值大于浮動元素寬度，則生效

但是這樣又回到了流體布局，毫無成長

但是，我們可以使用浮動元素的margin-right或者padding-right輕松實(shí)現(xiàn)間距效果

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

?

3. BFC自適應(yīng)布局優(yōu)勢與純流體特性布局相比的優(yōu)勢

自適應(yīng)內(nèi)容由于封閉，更健壯，容錯性強(qiáng)。比方說，內(nèi)部clear:both不會與兄弟float產(chǎn)生矛盾。而純流體布局，clear:both會讓后面內(nèi)容無法和float元素在一個水平上，產(chǎn)生布局問題。

自適應(yīng)內(nèi)容自動填滿浮動以為區(qū)域，無需關(guān)心浮動元素寬度，可以整站大規(guī)模應(yīng)用。而純流體布局，需要大小不確定的margin/padding等值撐開合適間距，無法CSS組件化。

?

4. BFC元素家族與自適應(yīng)布局面面觀
理論上，任何BFC元素和浮動搭配，都可以實(shí)現(xiàn)自動填充的自適應(yīng)布局。

但是，由于絕大多數(shù)的觸發(fā)BFC的屬性自身有一些古怪的特性，所以，實(shí)際操作的時候，能兼顧流體特性和BFC特性來實(shí)現(xiàn)無敵自適應(yīng)布局的屬性并不多。

下面舉一些例子：

對于，浮動(float)，絕對定位(position:absolute)以及inline-block的包裹性我稱之為“主動包裹”，其標(biāo)簽寬度會收縮至內(nèi)部元素大小；

而overflow與zoom，我稱之為“被動包裹”。

?

float:left?浮動元素本身BFC化，然而浮動元素有破壞性和包裹性，失去了元素本身的流體自適應(yīng)性，因此，無法用來實(shí)現(xiàn)自動填滿容器的自適應(yīng)布局。不過，其因兼容性還算良好，與堆積木這種現(xiàn)實(shí)認(rèn)知匹配，上手簡單，因此在舊時代被大肆使用，也就是常說的“浮動布局”，也算陰差陽錯開創(chuàng)了自己的一套布局（圣杯布局以及雙飛燕布局（柵格））。

position:absolute?這個脫離文檔流有些嚴(yán)重，不宜使用

overflow:hidden? ?也就是溢出剪裁什么的，本身還是個很普通的元素。因此，塊狀元素的流體特性保存相當(dāng)完好，附上BFC的獨(dú)立區(qū)域特性，可謂如虎添翼，一樣。由于很多場景我們是不能overflow:hidden的，因此，無法作為一個通用CSS類整站大規(guī)模使用。因此，float+overflow的自適應(yīng)布局，我們可以在局部（你確定不會有什么被剪裁的情況下）很happy地使用（IE6有bug不行）。

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

大家應(yīng)該知道，IE6/IE7瀏覽器下，block水平的元素設(shè)置display:inline-block元素還是block水平，也就是還是會自適應(yīng)容器的可用寬度顯示。于是，我們就陰差陽錯得到一個比overflow:hidden更牛逼的聲明，即BFC特性加身，又流體特性保留。

當(dāng)然，*zoom: 1也是類似效果，比例縮放，跟CSS3中transform:scale差不多;不過只適用于低級的IE瀏覽器，IE8以下可以清除浮動。（haslayout詳解）

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

因此，如果我們把display:table-cell這個BFC元素寬度設(shè)置很大，比方說3000像素。那其實(shí)就跟block水平元素自動適應(yīng)容器空間效果一模一樣了。除非你的容器寬度超過3000像素，實(shí)際上，一般web頁面不會有3000像素寬的模塊的。

display:table-row?對width無感，無法自適應(yīng)剩余容器空間。

display:table-caption?一無是處……還有其他聲明也都是一無是處，我就不全部展開了……

?

總結(jié)：我們對BFC聲明家族大致過了一遍，能擔(dān)任自適應(yīng)布局重任的也就是：

overflow:auto/hidden?IE7及以上

display:inline-block?IE6/IE7

display:table-cell?IE8及以上

?

?

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

轉(zhuǎn)載于:https://www.cnblogs.com/coderL/p/7834635.html

總結(jié)

以上是生活随笔為你收集整理的CSS深入理解流体特性和BFC特性下多栏自适应布局的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。