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