BFC的基本概念
塊格式化上下文（Block Formatting Context，BFC） 是Web頁面的可視化CSS渲染的一部分，是塊盒子的佈局過程發生的區域，也是浮動元素與其他元素交互的區域。 ——來自MDN
如何創建BFC
下列方式會創建塊格式化上下文：
- 根元素(
<html>) - 浮動元素（元素的
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的元素 ， 可以創建無副作用的BFC（火狐53+，chrome58+，opera45+支持）contain值為layout、content或 paint 的元素- 彈性元素（
display為flex或inline-flex元素的直接子元素） - 網格元素（
display為grid或inline-grid元素的直接子元素） - 多列容器（元素的
column-count或column-width不為auto，包括`column-count為1`） column-span為all的元素始終會創建一個新的BFC，即使該元素沒有包裹在一個多列容器中（標準變更，Chrome bug）。
BFC的使用場景（通過例子講解）
-
清除浮動
css.box { border: 1px solid #f00; // 觸發BFC, 以下任意一種 overflow: hidden; /* overflow: auto; */ /* position: absolute; */ /* position: fixed; */ /* display: table; */ /* display: flex; */ } .fl { float: left; width: 50px; height: 50px; background: #0f0; margin: 5px; }html<div class="box"> <div class="fl"></div> <div class="fl"></div> <div class="fl"></div> </div>效果展示
-
解決外邊距塌陷
創建新的BFC避免兩個相鄰
<div>之間的 外邊距合併 問題下面代碼：
三個p標籤，距離上方15px, 下方20px
p { margin: 15px auto 20px; background: #f00; }html<div class="bfc-container"> <p>1</p> <p>2</p> <p>3</p> </div>效果展示
)
兩個p標籤之間的高度為20px, 並不是 20+15 = 45 px, 這就是邊距重疊，選擇最大的一個邊距，及20px
解決方法就是給p標籤一個父元素，並創建BFC
cssp { margin: 15px auto 20px; background: #f00; }html<p>1</p> <div style="overflow: hidden;"> <p>2</p> </div> <p>3</p>這時候，中間的元素邊距不會發生重疊，此時的間距就是 45px
大家可以去嘗試一下
參考文檔：
- MDN
