塊級格式化上下文（BFC）
最近遇到一個專業的名詞，不是很懂，所以瞭解了一下，並總結歸納一下。首先清楚我們的問題是什麼？
BFC是什麼？怎麼建立？什麼情況下建立？有什麼特性和作用？
BFC是什麼？
BFC 就是一種屬性，這種屬性會影響著元素的定位以及與其兄弟元素之間的相互作用。
如何觸發BFC？
1，浮動元素，float 除 none 以外的值
2，絕對定位元素，position 的absolute，fixed（CSS3新增觸發條件）值
3，display 為以下其中之一的值 inline-blocks，table-cells，table-captions（CSS3新增觸發條件）
但是，"display:table" 本身並不產生 BFC，而是由它產生匿名框，匿名框中包含 "display:table-cell" 的框會產 BFC。 總之，對於 "display:table" 的元素，產生 BFC 的是匿名框而不是 "display:table"。
4，overflow 除了 visible 以外的值（hidden，auto，scroll）
在 CSS3 中，BFC 叫做 Flow Root。
值得注意的是，BFC 並不是元素，而是某些元素帶有的一些屬性，因此，是上面這些元素產生了 BFC ，而它們本身並不是 BFC ，這個概念需要區分清楚。
特性
1，BFC 會阻止外邊距摺疊
兩個相連的 div 在垂直上的外邊距會發生疊加；外邊距摺疊的規則：僅當兩個塊級元素相鄰並且在同一個塊級格式化上下文時，它們垂直方向之間的外邊距才會疊加；所以說，即便兩個塊級元素相鄰，但當它們不在同一個塊級格式化上下文時它們的邊距也不會摺疊。因此，阻止外邊距摺疊只需產生新的 BFC 。
例子： 三個 div 各包含一個 p 元素，三個 div 及其包含的 p 元素都有頂部和底部的外邊距。但只有第三個 div 的邊距沒有與它的子元素 p 的外邊距摺疊。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: red; width: 500px; margin-top: 50px; margin-bottom: 50px; } div { background-color: yellow; margin-top: 50px; margin-bottom: 50px; } </style> </head> <body> <div><p>第一段</p></div> <div><p>第二段</p></div> <div><p style="display: inline-block">第三段</p></div> //添加了display：inline-block屬性，具有BFC屬性 </body> </html>
2，BFC 可以包含浮動的元素
有兩個 div ，它們各包含一個設定了浮動的 p 元素，但第一個 div 出現了“高度塌陷”，這是因為內部的浮動元素脫離了普通流，因此該 div 相當於一個空標籤，沒有高度和寬度，即高度為 0 ，上下邊框也重疊在一起。而第二個 div 使用 overflow: hidden 觸發了 BFC ，可以包含浮動元素，因此能正確表現出高度，其邊框位置也正常了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: red;
float: right;
}
div {
background-color: yellow;
margin-bottom: 50px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div><p>第一段</p></div>
<div style="overflow: hidden "><p >第二段</p></div>
</body>
</html>3，BFC 可以阻止元素被浮動元素覆蓋
藍色背景的 div 使用 overflow: hidden 觸發了 BFC ，它並不會被它的兄弟浮動元素覆蓋，而是處於它的旁邊。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: blue;
width: 300px;
}
div {
border: 1px solid #ccc;
}
.blue {
background-color: yellow;
width: 200px;
float: left;
}
</style>
</head>
<body>
<div><p class="blue">第一段</p><p>第一段2</p></div>
<div><p class="blue">第二段</p><p style="overflow: hidden">第二段2</p></div>
</body>
</html>以後可能還會有補充。