1.什么是BFC
其實在老師讓我們寫這篇叫BFC的時候，我跟本不知道有什么BFC的東西。
后來，我找了一些資料，知道了，BFC是Block Formatting Context （塊級格式化上下文）的縮寫，它是W3C CSS 2.1 規范中的一個概念，是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何布局，並且與這個區域外部毫不相干。
2.什么情況下會創建BFC
CSS規范說明了在下列這些情況下會創建新的block formatting context：
浮動元素（float: left | right）；
絕對定位元素（position: absolute | fixed）；
行內塊元素（display: inline-block）；
表格的單元格（display: table-cells，TD、TH）；
表格的標題（display: table-captions，CAPTION）；
'overflow' 特性不為visible 的元素（除非該值已經傳播到viewport?）；
表格元素創建的"匿名框"
注意，"display:table" 本身並不產生"block formatting contexts"。但是，它可以產生匿名框，其中包含"display:table-cell" 的框會產生塊格式化上下文。總之，對於"display:table" 的元素，產生塊格式化上下文的是匿名框而不是"display:table" 。
注意，是這些元素創建了塊格式化上下文，它們本身不是塊格式化上下。
3.BFC布局規則：
- 內部的
Box會在垂直方向，一個接一個地放置。 Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊- 每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。
BFC的區域不會與float box重疊。BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。- 計算
BFC的高度時，浮動元素也參與計算
4.BFC的主要作用及原理
1.自適應兩欄式
代碼：
頁面效果如下：
這個圖就像上面的布局規則第3條（每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。）所說一樣，雖然存在浮動的元素mydiv1，但mydiv2的左邊依然會與包含塊的左邊相接觸,而根據布局規則第4條（BFC的區域不會與float box重疊）所說，我們可以通過通過觸發mydiv2生成BFC， 來實現自適應兩欄布局:
而當我們添加了（overflow:hidden）后，我們就通過觸發mydiv2來生成了一個BFC，而BFC生成后頁面效果如圖：
注意：這個新的BFC不會與浮動的mydiv1重疊。因此會根據包含塊的寬度，和mydiv1的寬度，自動變窄
2.清除浮動
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" content="text/html">
<title></title>
<style type="text/css">
.mydiv1{
width: 100px;
height: 150px;
float: left;
background: #f66;
margin-left: 10px;
}
.mydiv2{
width: 100px;
height: 150px;
background: #fcc;
float: left;
margin-left: 10px;
}
.mydiv3{
width: 100px;
height: 150px;
float: left;
background-color: #ebcccc;
margin-left: 10px;
}
.wdiv{
border: 5px solid #9acd32;
width: 100%;
}
</style>
</head>
<body>
<div class="wdiv">
<div class="mydiv1"></div>
<div class="mydiv2"></div>
<div class="mydiv3"></div>
</div>
</body>
</html>
一般我們想下的是如下的情況：
可是現實效果呢？卻是如下：
之所以會這樣了，是因為父容器並沒有把浮動的子元素包圍起來，俗稱塌陷
而我們要清除這種現像了，就要根據布局規則第6條（計算BFC的高度時，浮動元素也參與計算），我們可以觸發wdiv來生成BFC，，那么wdiv在計算高度時，wdiv內部的浮動元素也會參與計算。代碼如下：
效果也同上面第一張一樣，效果如下：
總結
因為BFC內部的元素和外部的元素絕對不會互相影響，因此， 當BFC外部存在浮動時，它不應該影響BFC內部Box的布局，BFC會通過變窄，而不與浮動有重疊。同樣的，當BFC內部有浮動時，為了不影響外部元素的布局，BFC計算高度時會包括浮動的高度。避免margin重疊也是這樣的一個道理。