目錄
一. BFC基本慨念
一個塊格式化上下文（block formatting context） 是Web頁面的可視化CSS渲染出的一部分。它是塊級盒佈局出現的區域，也是浮動層元素進行交互的區域。
網頁是一個一個盒子組成的，而BFC就是一種css盒模型的渲染規則。
-
CSS盒模型：鏈接暫無
二. BFC渲染規則
- 以下列舉一些比較重要的規則：
- 根元素<html>是一個BFC元素。
- 在同一個BFC元素中，相鄰盒子垂直方向上的margin會發生摺疊，取較大的margin值。
- BFC元素是一個獨立的容器，外部元素和內部元素互不影響。
- BFC的區域不會與浮動盒子產生交集，而是緊貼浮動邊緣。
- 計算BFC的高度時，自然也會檢測浮動或者定位的盒子高度。
- BFC元素不再和其子元素髮生 margin 摺疊。
- 瞭解上面的規則後，我們就能解釋平時會遇到的一些css奇怪現象：
1. 垂直方向上元素margin的合併現象
首先，兩個父子關係的div，給子元素添加一個margin-top: 100px後，父元素和子元素同時下移100px。
示例如下:
代碼如下：
<style>
.parent {
width: 200px;
height: 200px;
background: blue;
}
.child {
width: 100px;
height: 100px;
background: yellow;
margin-top: 100px;
}
</style>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
原因：規則1和規則2
2. 垂直方向上元素margin的合併現象
兩個相鄰的div之間分別設置了margin-bottom: 60px和margin-top: 40px，而他們實際的間距只有60px。
示例如下:
代碼如下 ：
<style>
.box1 {
width: 200px;
height: 100px;
background: blue;
margin-bottom: 60px;
}
.box2 {
width: 200px;
height: 100px;
background: yellow;
margin-top: 40px;
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
原因：規則1和規則2
3. overflow:hidden可以清除浮動
本文中所有的“清除浮動"均指清除浮動造成的副作用
首先，兩個父子關係的div，給子元素添加float: left後，子元素脫離的文檔流,於是父元素的高度爲0，如下圖：
然後父元素添加 overflow: hidden 就可以清除浮動，如下圖：
代碼如下：
<style>
.parent {
width: 200px;
border: 4px solid red;
overflow: hidden;
}
.child {
width: 100px;
height: 100px;
background: yellow;
float: left;
}
</style>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
原因：規則1和規則5
4. overflow:hidden 配合浮動,可以實現自適應佈局
首先，兩個兄弟關係的div在同一個父div中，給子元素1添加float: left後，於是父元素高度由子元素2撐起，子元素2佔據所有父元素，子元素1脫離的文檔流，如下圖：
然後子元素2添加overflow: hidden 後，其緊貼子元素1邊緣，不再佔據整個父元素，如下圖：
代碼如下：
<style>
.parent {
width: 100%;
border: 4px solid red;
}
.box1 {
width: 100px;
height: 100px;
background: blue;
float: left;
}
.box2 {
height: 100px;
background: yellow;
overflow: hidden;
}
</style>
<body>
<div class="parent">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
原因：規則1和規則4
三. 如何創建BFC元素
根元素<html>就是最大的BFC容器。
創建BFC元素的方式很多,常見包括:
- 根元素或其它包含它的元素
- 浮動元素 (元素的 float 不是 none)
- 絕對定位元素 (元素具有 position 爲 absolute 或 fixed)
- 內聯塊 (元素具有 display: inline-block)
- 表格單元格 (元素具有 display: table-cell，HTML表格單元格默認屬性)
- 表格標題 (元素具有 display: table-caption, HTML表格標題默認屬性)
- 具有overflow 且值不是 visible 的塊元素，
- display: flow-root
- column-span: all 應當總是會創建一個新的格式化上下文，即便具有 column-span: all 的元素並不被包裹在一個多列容器中。
- 一個塊格式化上下文包括創建它的元素內部所有內容，除了被包含於創建新的塊級格式化上下文的後代元素內的元素。
其中常見的還是overflow : hidden產生的。