如何理解CSS中BFC?
定義: 塊格式化上下文（Block Formatting Context，BFC） 是Web頁面的可視化CSS渲染的一部分，是塊盒子的佈局過程發生的區域，也是浮動元素與其他元素交互的區域。
BFC 特性及應用
- 同一個 BFC 下外邊距會發生摺疊
代碼理解
//兩個 div 元素都處於同一個 BFC 容器下 (這裡指 body 元素) 所以第一個 div 的下邊距和第二個 div 的上邊距發生了重疊，兩個盒子之間距離只有 100px，而不是 200px
// 這不是 CSS 的 bug，我們可以理解為一種規範，如果想要避免外邊距的重疊，可以將其放在不同的 BFC 容器中
- BFC 可以包含浮動的元素(清除浮動）
我們都知道，浮動的元素會脫離普通文檔流，來看下下面一個例子
// 由於容器內元素浮動，脫離了文檔流，所以容器只剩下 2px 的邊距高度。如果使觸發容器的 BFC，那麼容器將會包裹著浮動元素
// 下面我們將其清除浮動觸發BFC,將可包裹浮動元素
- BFC 可以阻止元素被浮動元素覆蓋
這裡有一個經典的css佈局試題(兩列自適應佈局)就是應用的BFC特性
left
right
觸發BFC
下列方式會觸發BFC(摘抄自MDN)
- 根元素或包含根元素的元素
- 浮動元素（元素的 float 不是 none）
- 絕對定位元素（元素的 position 為 absolute 或 fixed）
- 行內塊元素（元素的 display 為 inline-block）
- 表格單元格（元素的 display為 table-cell，HTML表格單元格默認為該值）
- 表格標題（元素的 display 為 table-caption，HTML表格標題默認為該值）
- 匿名錶格單元格元素（元素的 display為 table、table-row、 table-row-group、table-header-group、table-footer-group（分別是HTML table、row、tbody、thead、tfoot的默認屬性）或 inline-table）
- overflow 值不為 visible 的塊元素
- display 值為 flow-root 的元素
- contain 值為 layout、content或 strict 的元素
- 彈性元素（display為 flex 或 inline-flex元素的直接子元素）
- 網格元素（display為 grid 或 inline-grid 元素的直接子元素）
- 多列容器（元素的 column-count 或 column-width 不為 auto，包括 column-count 為 1）
- column-span 為 all 的元素始終會創建一個新的BFC，即使該元素沒有包裹在一個多列容器中
總結
BFC概念很多同學都沒有什麼概念，不知道為什麼需要清除浮動,margin重疊等等系列騷操作,看完這篇我想應該有個大概了
再來回顧一個BFC的特性
- 同一個 BFC 下外邊距會發生摺疊
- BFC 可以阻止元素被浮動元素覆蓋
- BFC 可以包含浮動的元素(清除浮動）
分享到:
閱讀更多 喜歡寫bug的程序猿 的文章
