CSS深入理解流体特性和BFC特性下多栏自适应布局
一、塊狀元素的流體特性與自適應(yīng)布局
塊狀元素像放在容器中的水流一樣，內(nèi)容區(qū)域會(huì)隨著margin,?padding,?border的出現(xiàn)自動(dòng)填滿剩余空間，這就是塊狀元素的流體特性。
來(lái)一個(gè)小實(shí)驗(yàn)：
div {
? ? ? ?margin-left：100px；
? ? ? ?width：100%；
}
此時(shí)發(fā)現(xiàn)，左側(cè)永遠(yuǎn)100px留白，而div隨著容器寬度變化而自適應(yīng)變化了
我們需要好好利用左側(cè)100px的留白間距，豈不是就可以實(shí)現(xiàn)兩欄自適應(yīng)效果？
為了不影響原本的流體特性，我們可以使用破壞性屬性，如浮動(dòng)(float:left)，或者絕對(duì)定位(position:absolute)。
然而，利用塊狀元素流體特性實(shí)現(xiàn)的自適應(yīng)布局有個(gè)不足，就是，我們需要知道浮動(dòng)或絕對(duì)定位內(nèi)容的尺寸。
然后，流體內(nèi)容才能有對(duì)應(yīng)的margin或padding或border值進(jìn)行位置修正。
于是，問(wèn)題來(lái)了，我們沒(méi)法單純使用一個(gè)公用的類名，類似.clearfix這樣，整站通用。因?yàn)椴煌赃m應(yīng)場(chǎng)景的留白距離是不一樣的。
此時(shí)，我們可以利用塊狀元素的BFC實(shí)現(xiàn)更強(qiáng)大更智能的多欄自適應(yīng)布局（本文重點(diǎn)）
?
二、元素的BFC特性與自適應(yīng)布局
BFC特性很多，參考我之前的文章：深入理解BFC
而我們這里，只關(guān)心一個(gè)，和float元素做相鄰兄弟時(shí)候的表現(xiàn)。
流體特性div, 當(dāng)其和浮動(dòng)元素當(dāng)兄弟的時(shí)候，是覆蓋的關(guān)系（可以腦補(bǔ)下文字環(huán)繞圖片效果）。
如果給div overflow：hidden，觸發(fā)bfc
普通流體元素BFC后，為了和浮動(dòng)元素不產(chǎn)生任何交集，順著浮動(dòng)邊緣形成自己的封閉上下文
不與浮動(dòng)交集，自動(dòng)退避浮動(dòng)元素寬度的距離，但，本身作為普通元素的流動(dòng)性依然存在
?
2. BFC自適應(yīng)布局模塊間的間距
一般而言，我們需要一點(diǎn)間距。我們的第一反應(yīng)就是margin
div設(shè)置margin-left:10px? ? ?但是好像不起作用 ？?
這里的margin并不是無(wú)效，而是值不夠大
當(dāng)你設(shè)置margin-left值大于浮動(dòng)元素寬度，則生效
但是這樣又回到了流體布局，毫無(wú)成長(zhǎng)
但是，我們可以使用浮動(dòng)元素的margin-right或者padding-right輕松實(shí)現(xiàn)間距效果
還可以使用BFC元素的padding-left撐開(kāi)間距
?
3. BFC自適應(yīng)布局優(yōu)勢(shì)與純流體特性布局相比的優(yōu)勢(shì)
?
4. BFC元素家族與自適應(yīng)布局面面觀
理論上，任何BFC元素和浮動(dòng)搭配，都可以實(shí)現(xiàn)自動(dòng)填充的自適應(yīng)布局。
但是，由于絕大多數(shù)的觸發(fā)BFC的屬性自身有一些古怪的特性，所以，實(shí)際操作的時(shí)候，能兼顧流體特性和BFC特性來(lái)實(shí)現(xiàn)無(wú)敵自適應(yīng)布局的屬性并不多。
下面舉一些例子：
對(duì)于，浮動(dòng)(float)，絕對(duì)定位(position:absolute)以及inline-block的包裹性我稱之為“主動(dòng)包裹”，其標(biāo)簽寬度會(huì)收縮至內(nèi)部元素大小；
而overflow與zoom，我稱之為“被動(dòng)包裹”。
?
float:left?浮動(dòng)元素本身BFC化，然而浮動(dòng)元素有破壞性和包裹性，失去了元素本身的流體自適應(yīng)性，因此，無(wú)法用來(lái)實(shí)現(xiàn)自動(dòng)填滿容器的自適應(yīng)布局。不過(guò)，其因兼容性還算良好，與堆積木這種現(xiàn)實(shí)認(rèn)知匹配，上手簡(jiǎn)單，因此在舊時(shí)代被大肆使用，也就是常說(shuō)的“浮動(dòng)布局”，也算陰差陽(yáng)錯(cuò)開(kāi)創(chuàng)了自己的一套布局（圣杯布局以及雙飛燕布局（柵格））。
position:absolute?這個(gè)脫離文檔流有些嚴(yán)重，不宜使用
overflow:hidden? ?也就是溢出剪裁什么的，本身還是個(gè)很普通的元素。因此，塊狀元素的流體特性保存相當(dāng)完好，附上BFC的獨(dú)立區(qū)域特性，可謂如虎添翼，一樣。由于很多場(chǎng)景我們是不能overflow:hidden的，因此，無(wú)法作為一個(gè)通用CSS類整站大規(guī)模使用。因此，float+overflow的自適應(yīng)布局，我們可以在局部（你確定不會(huì)有什么被剪裁的情況下）很happy地使用（IE6有bug不行）。
display:inline-block?CSS屆最偉大的聲明之一，但是，在這里，就有些捉襟見(jiàn)肘了。display:inline-block會(huì)讓元素尺寸包裹收縮，完全就不是我們想要的block水平的流動(dòng)特性。
大家應(yīng)該知道，IE6/IE7瀏覽器下，block水平的元素設(shè)置display:inline-block元素還是block水平，也就是還是會(huì)自適應(yīng)容器的可用寬度顯示。于是，我們就陰差陽(yáng)錯(cuò)得到一個(gè)比overflow:hidden更牛逼的聲明，即BFC特性加身，又流體特性保留。
當(dāng)然，*zoom: 1也是類似效果，比例縮放，跟CSS3中transform:scale差不多;不過(guò)只適用于低級(jí)的IE瀏覽器，IE8以下可以清除浮動(dòng)。（haslayout詳解）
display:table-cell?讓元素表現(xiàn)得像單元格一樣，IE8及以上以上瀏覽器才支持。跟display:inline-block一樣，會(huì)跟隨內(nèi)部元素的寬度顯示，看樣子也是不合適的命。但是，單元格有個(gè)非常神奇的特性，就是你寬度值設(shè)置地再大，大到西伯利亞，實(shí)際寬度也不會(huì)超過(guò)表格容器的寬度。
因此，如果我們把display:table-cell這個(gè)BFC元素寬度設(shè)置很大，比方說(shuō)3000像素。那其實(shí)就跟block水平元素自動(dòng)適應(yīng)容器空間效果一模一樣了。除非你的容器寬度超過(guò)3000像素，實(shí)際上，一般web頁(yè)面不會(huì)有3000像素寬的模塊的。
display:table-row?對(duì)width無(wú)感，無(wú)法自適應(yīng)剩余容器空間。
display:table-caption?一無(wú)是處……還有其他聲明也都是一無(wú)是處，我就不全部展開(kāi)了……
?
總結(jié)：我們對(duì)BFC聲明家族大致過(guò)了一遍，能擔(dān)任自適應(yīng)布局重任的也就是：
?
?
參考自：http://www.zhangxinxu.com/wordpress/?p=4588
轉(zhuǎn)載于:https://www.cnblogs.com/coderL/p/7834635.html
總結(jié)
以上是生活随笔為你收集整理的CSS深入理解流体特性和BFC特性下多栏自适应布局的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： centos7下安全访问远程服务器
- 下一篇： angularjs的一点总结