建站
咨詢
售后
建站咨詢
新聞中心
大家好，我是前端西瓜哥。今天來(lái)學(xué)習(xí) BFC。
10年積累的網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)制作后付款的網(wǎng)站建設(shè)流程，更有羅城免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
BFC，為 Block Formatting Context 的縮寫，中文翻譯為 塊格式上下文。
BFC 是 Web 頁(yè)面 CSS 渲染的一個(gè)機(jī)制，是塊級(jí)盒子布局中產(chǎn)生的區(qū)域。
你可以將一個(gè) BFC 可以理解為一個(gè)容器，里面的元素不會(huì)影響到容器外的布局。
怎樣的元素屬于 BFC?
- 根元素，也就是 HTML 元素。
- 浮動(dòng)元素，即使用了 float 屬性且值不為 none。
- 絕對(duì)定位元素。
- 塊級(jí)容器(如 display 的值為 inline-blocks、table-cells、table-captions)。
- overflow 的值不為 visible 的元素。
- 使用了 display: flow-root 的元素。這是新出的值，專門用來(lái)創(chuàng)建無(wú)副作用的 BFC。兼容性存疑，比較少用。
當(dāng)然還有一些 CSS 屬性也可以觸發(fā) BFC，但比較少見(jiàn)，這里就不一一列舉了，讀者可自行閱讀 MDN 文檔。
目前來(lái)說(shuō)，最常見(jiàn)的是通過(guò) overflow: hidden 來(lái)構(gòu)建 BFC。一般情況下，它的副作用最小。但如果元素下有超出盒子范圍的內(nèi)容，會(huì)被截掉，請(qǐng)謹(jǐn)慎使用。
BFC 的特性
BFC 主要有兩個(gè)特性，我們來(lái)學(xué)習(xí)一下。
特性1：上下外邊距重疊
同一個(gè) BFC 下的兩個(gè)相鄰塊級(jí)元素，會(huì)發(fā)生上下方向的 margin 重疊。
比如前一個(gè) div 設(shè)置了 margin-bottom: 20px，下一個(gè) div 設(shè)置了 margin-top: 10px，然后你會(huì)發(fā)現(xiàn)它們的上下距離其實(shí)是 20px(二者的最大值)，而不是 30px(二者之和)。
如果想避免這種情況，可以給這兩個(gè) div 裹上一個(gè) BFC。
因?yàn)?overflow: hidden 有副作用，所以在實(shí)際開(kāi)發(fā)中，我更喜歡用 padding 來(lái)替代 margin。
特性 2：浮動(dòng)元素也會(huì)參與計(jì)算高度
浮動(dòng)，是非常奇怪的一種效果。效果類似 word 的文字環(huán)繞排版，可以讓文字和內(nèi)聯(lián)樣式環(huán)繞著它。
當(dāng)一個(gè)元素被賦予浮動(dòng)效果后，它會(huì)脫落正常文檔流，向左或向右平移到所在容器的邊框(border)位置，或者碰到另一個(gè)浮動(dòng)元素為止。
浮動(dòng)元素脫離了正常文檔流，一般情況下，計(jì)算容器元素的高度時(shí)，是考慮浮動(dòng)元素的高度的。
但 BFC 可以強(qiáng)行讓浮動(dòng)元素參與計(jì)算。
上面的這種寫法，沒(méi)有給 container 應(yīng)用 BFC，會(huì)導(dǎo)致容器元素高度塌陷，效果見(jiàn)下圖左邊。
當(dāng)我們將 overflow: hidden 的注釋去除，容器元素就應(yīng)用了 BFC，就能得到我們想要的容器元素根據(jù)子元素自動(dòng)撐高的效果了。效果見(jiàn)下圖右邊。
結(jié)尾
BFC 主要掌握它的兩個(gè)特性就好了：
- 上下外邊距重疊。
- 浮動(dòng)元素參與 BFC 高度計(jì)算。
網(wǎng)站名稱：聊聊CSS中的BFC是什么？
文章來(lái)源：http://fisionsoft.com.cn/article/dheggio.html
