可能對於很多前端而言，BFC 都是神祕的存在。大多數人停留在只知其一，不知其二的狀態。本文就來揭祕一下 CSS 中的 BFC。其實你不需要去糾結它的定義。你只需要知道 BFC 是一個獨立的渲染區域，清楚它的佈局規則及應用即可。
何爲 BFC
BFC 即 Block Formatting Context。中文譯爲塊級格式化上下文。在介紹 BFC 之前，你需要先了解 Box 的概念。Box 是 CSS 佈局的對象和基本單位。一個頁面是由若干個 Box 組成。元素的類型和 display 屬性決定了 Box 如何佈局。
Formatting Context 是 W3C 中 CSS2.1 規範中的一個概念。它是頁面的一塊渲染區域。並且有一套自己的渲染規則。它決定了元素如何定位以及與其他元素之間的作用關係。
最常見的 Formatting Context 有 Block Fomatting Context （簡稱 BFC）和 Inline Formatting Context （簡稱 IFC）。
BFC 佈局規則
- Box 盒子依次垂直排列。
- Box 盒子之間的距離由
margin屬性決定。屬於同一個 BFC 的兩個相鄰盒子的margin值會發生重疊。 - Box 盒子（塊盒與行盒）margin 值爲 0 的情況下其左邊與塊級元素左邊重疊。
- BFC 的區域不會與 float 區域重疊。
- BFC 就是頁面上一個獨立的容器。容器裏面的元素不會影響到外面的元素。反之如此。
- 計算 BFC 高度時，浮動元素也參與計算。
創建 BFC
- 根元素或者包含它的元素
- 浮動元素（float 屬性不爲 none）
- position 爲 absolute 或者 fixed
- overflow 不爲 visible 的塊元素
- display 爲 inline-block（內聯塊），table-cell（表格單元格），table-cation（表格標題），table-row，flex，inline-flex，flow-root（彈性佈局）
BFC 的應用
- 防止 margin 重疊（同一個 BFC 的兩個相鄰 Box 的
margin會發生重疊。觸發生成兩個 BFC，就不會發生重疊）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
div {
color: #fff;
background: pink;
width: 200px;
line-height: 100px;
text-align:center;
margin: 20px;
}
</style>
<body>
<div>盒子1</div>
<div>盒子2</div>
</body>
</html>
以上 盒子1 和 盒子2 之間垂直距離重疊了一個 20px 的 margin 值。將其中一個 Box 觸發 BFC（設置 display 爲 inline-block 即可）就不會重疊。
- 清除浮動（創建一個新的 BFC，計算 BFC 高度時，浮動元素也會計算在內）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
div .son{
color: #fff;
background: pink;
width: 200px;
line-height: 100px;
text-align:center;
margin: 30px;
}
</style>
<body>
<div id="father">
<div class="son">盒子1</div>
<div class="son">盒子2</div>
</div>
</body>
</html>
以上兩個子元素 .son 均爲浮動元素，所以父元素 #father 高度坍塌。給父元素激活 BFC，設置 overflow:hidden，即可解決父元素高度坍塌的問題。
- 自適應多欄佈局（BFC 的區域不會與 float 屬性的盒子重疊，這種情況下可以觸發生成新的 BFC） 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
body {
width: 100%;
position: relative;
}
.left {
width: 100px;
height: 200px;
float: left;
background: pink;
text-align: center;
line-height: 200px;
font-size: 20px;
}
.right {
height: 400px;
background: gray;
text-align: center;
line-height: 400px;
font-size: 40px;
}
</style>
<body>
<div class="left">LEFT</div>
<div class="right">RIGHT</div>
</body>
</html>
以上代碼中，元素 .left 發生浮動，脫離了文檔流。與元素 .right 重疊。可以將元素 .right 觸發 BFC（設置 overflow:hidden）。使之成爲自適應兩欄佈局。