為什么會有BFC？
BFC是什么？
如何觸發(fā)BFC？
BFC可以解決什么問題？
這些問題還有其他解決方案嗎
動畫視頻：
文字解析：
前端程序員在布局時
經(jīng)常會遇到各種煩人的問題
比如
明明說好了每個元素都是一個打包盒
那在打包盒外的元素，應(yīng)該不會受到打包盒內(nèi)的元素影響
可是事實(shí)上是這樣的嗎
小凍凍 這一塊高度沒有了
小凍凍 這個兩欄布局沒有自適應(yīng)
小凍凍 這些元素之間的垂直距離好像不太對
從理論上來講
被包含在父元素里的元素是不會影響到父元素旁邊的元素
但實(shí)際上卻并不總是如此
那么有沒有什么辦法能讓里面的元素和外部真正隔離開來呢
也許你可以試試BFC
BFC block formatting context
可以直譯為“塊級格式化上下文”
官方大致是這樣解釋的
它決定了元素如何對其內(nèi)容進(jìn)行定位
以及與其他元素的關(guān)系和相互作用
當(dāng)涉及到可視化布局的時候
Block Formatting Context提供了一個環(huán)境
HTML元素在這個環(huán)境中按照一定規(guī)則進(jìn)行布局
但其實(shí)我們只需要記住
BFC的目的就是
形成一個完全獨(dú)立的空間
讓空間里的子元素不會影響到外面的布局
如何才能形成這樣一個神奇的空間呢
我們通過為元素設(shè)置一些CSS屬性
就能觸發(fā)這一空間
而最最最常用的觸發(fā)規(guī)則有四種
在知道觸發(fā)規(guī)則之后
應(yīng)該怎么運(yùn)用它
又能解決什么問題呢
第一種 解決浮動元素令父元素高度塌陷的問題
假設(shè)頁面里有一個父元素和幾個子元素
這幾個子元素都設(shè)為浮動時
會產(chǎn)生一種神奇的現(xiàn)象
父元素高度塌陷
這是因?yàn)楦拥淖釉孛撾x了文檔流
被提起來形成新的VIP隊(duì)列
下方普通隊(duì)列中的元素?zé)o法觸及它
父元素檢測不到它的存在無法被它撐開
看起來就是父元素高度塌陷了
后面的布局也會亂掉
這時就可以給父元素添加屬性{overflow: hidden;}
當(dāng)然這只是一種做法
你還可以添加屬性{display: table-cell;}
或者是{display: block;}
或者是{position: fixed;}
或者是{position: absolute;}等等
觸發(fā)了BFC的容器就是頁面上的一個完全隔離開的容器
容器里的子元素絕對不會影響到外面的元素
為了保證這個規(guī)則
觸發(fā)了BFC的父元素在計(jì)算高度時不得不讓浮動的子元素也參與進(jìn)來
變相地實(shí)現(xiàn)了清除內(nèi)部浮動的目的
但有的時候出于布局需要也可能無法給父元素設(shè)置這些屬性
而解決高度塌陷
常用的還有以下這些辦法
1.讓父元素也浮動起來
這樣父元素和子元素一起脫離文檔流
這樣父元素就能自適應(yīng)子元素的高度
優(yōu)點(diǎn)是代碼量極少
缺點(diǎn)是這是一種將錯就錯的辦法
會直接影響父元素之后的元素排列引發(fā)其他問題
2.給父元素添加一個固定高度
但這個方法只適用于已知子元素高度的情況
優(yōu)點(diǎn)是沒有學(xué)習(xí)成本
缺點(diǎn)是不靈活
也難以維護(hù)
3.在浮動的子元素后面增加一個空元素
設(shè)置{clear: both}來清除浮動
優(yōu)點(diǎn)是簡單易懂容易掌握
缺點(diǎn)是會增加無意義的標(biāo)簽
不利于以后維護(hù)
4.為浮動的最后一個子元素設(shè)置偽元素
after{clear: both}
這個辦法和前一個是同樣的原理
只不過這里用偽類替代了空元素
優(yōu)點(diǎn)是結(jié)構(gòu)和語義完全正確
缺點(diǎn)是復(fù)用不當(dāng)會導(dǎo)致代碼量增加
至于到底該選用哪種辦法
那還得根據(jù)實(shí)際需求來決定了
第二種 解決自適應(yīng)布局的問題
PC端的網(wǎng)頁，像這樣的兩欄布局非常常見
一般需要左側(cè)邊欄定寬
右側(cè)主體隨頁面寬度自適應(yīng)變化
通常是用浮動來實(shí)現(xiàn)的
它利用了塊級元素會盡可能占滿一行的特性
使得右邊的元素可以隨著頁面寬度變化而變化
又利用了浮動的特性
讓左側(cè)元素覆蓋在右邊元素的上方
同時還能擠開下方元素里的內(nèi)容
讓頁面看起來是兩欄的效果
但隨著右邊元素里文字增加
超出了左邊元素的高度之后
文字就會流動到最左側(cè)
看起來就是文字環(huán)繞左側(cè)元素
這顯然不是我們希望的效果
因此這里為右側(cè)元素觸發(fā)BFC
觸發(fā)了BFC的容器就是頁面上的一個完全隔離開的容器
容器里的子元素絕對不會影響到外面的元素
為了保證這個規(guī)則
觸發(fā)了BFC的右側(cè)元素為了將內(nèi)部元素和左側(cè)浮動元素隔離開來
不得不形成這樣左右完全隔離的兩欄
同時如果右側(cè)元素依舊是塊級元素
那么他盡可能占滿一行的特性還在
這樣就保證了右側(cè)元素依舊是自適應(yīng)的
當(dāng)然我們還有其他的辦法可以做這樣左側(cè)固定，右側(cè)自適應(yīng)的布局
1左邊左浮動?右邊設(shè)置{margin-left: 200px}
2.左邊絕對定位?右邊設(shè)置{margin-left: 200px}
3.右側(cè)元素設(shè)置頂線和右線的位置為0 左線的位置為200像素 寬度100%
這些方法相差并不是很大，可以根據(jù)自己的喜好選擇性地使用
第三種 解決外邊距垂直方向重合問題
還記得我們上一節(jié)里介紹過的外邊距垂直方向重合嗎
也就是兄弟元素之間的外邊距在垂直方向上會取最大值而不是取和
相鄰的兩個p元素都設(shè)置了margin為20像素
本來期望它們在垂直方向上的距離相加起來應(yīng)該是40像素
但實(shí)際上只有20像素
那么我們可以通過觸發(fā)BFC來防止它們之間相互影響
比如為其中一個p元素的外面包裹一層父元素
并且觸發(fā)父元素BFC比如{overflow: hidden}
這樣打破原有格局 ，就不再會重疊啦
同樣的，我們還有另外一個解決方案
用padding來替代margin
優(yōu)點(diǎn)是簡單易懂
缺點(diǎn)是如果根據(jù)設(shè)計(jì)本來就需要設(shè)置padding樣式，那就沒辦法用了
可見通過觸發(fā)BFC我們能解決幾個非常常見的問題
1浮動元素的父元素高度塌陷
2.兩欄自適應(yīng)布局
3.外邊距垂直方向重合
怎么樣是不是很簡單？
趕緊上手寫點(diǎn)代碼練習(xí)一下吧~
更多內(nèi)容，歡迎加大師姐微信：it_xzy
入群了解課程動態(tài)、幕后花絮，還有機(jī)會參與到課程制作，成為聯(lián)合制作人喲
