一、BFC是什麼？
官方定義
BFC（Block Formatting Context，塊格式化上下文） 是Web頁面的可視化CSS渲染的一部分，是塊盒子的佈局過程發生的區域，也是浮動元素與其他元素交互的區域。
詳見MDN
看不明白？那就對了！
官方解釋若不搞得抽象難懂些，怎能顯出高大上？！（手動滑稽）
個人理解
1、BFC是一個獨立的佈局環境，BFC內部的元素佈局與外部互不影響；
2、可以通過一些條件觸發BFC，從而實現佈局上的需求或解決一些問題；
3、可以將BFC想象成一個工具，無需探究其定義，只要着重理解其功能（特性）即可。
二、BFC有什麼用？
BFC的觸發條件
1、根元素（<html>）
2、float值非none
3、overflow值非visible
4、display值爲inline-block、table-cell、table-caption、flex、inline-flex
5、position值爲absolute、fixed
BFC的特性
1、屬於同一個BFC的兩個相鄰容器的上下margin會重疊（重點）
2、計算BFC高度時浮動元素也參於計算（重點）
3、BFC的區域不會與浮動容器發生重疊（重點）
4、BFC內的容器在垂直方向依次排列
5、元素的margin-left與其包含塊的border-left相接觸
6、BFC是獨立容器，容器內部元素不會影響容器外部元素
注：其中1、2、3需重點理解，其特性和功能下面將用代碼逐個演示；
4、5、6爲基本現象，按字面意思理解即可，不做重點說明。
特性1：屬於同一個BFC的兩個相鄰容器的上下margin會重疊
功能：可解釋爲何相鄰兩容器上下外邊距會發生重疊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.top{
width: 200px;
height: 200px;
background: red;
margin-bottom: 40px;
}
.bottom{
width: 200px;
height: 200px;
background: blue;
margin-top: 60px;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="bottom"></div>
</body>
</html>
代碼渲染效果如下：
圖1：紅色塊下外邊距
圖2：藍色塊上外邊距
現象：
當給紅色塊下外邊距margin-bottom，給藍色塊上外邊距margin-top時，上下外邊距會發生重疊，兩個色塊的間距解析爲兩者中的較大值（60px）。
原因：
此時紅色塊和藍色塊屬於同一個BFC，即根元素（<html>）。BFC的特性1規定 “屬於同一個BFC的兩個相鄰容器的上下margin會重疊”，故兩者上下邊距發生重疊。
通過BFC特性解決上下margin的重疊問題：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.top{
width: 200px;
height: 200px;
background: red;
margin-bottom: 60px;
}
.bottom{
width: 200px;
height: 200px;
background: blue;
margin-top: 60px;
}
.box{
overflow: hidden;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="box">
<div class="bottom"></div>
</div>
</body>
</html>
代碼渲染效果如下：
現象：
給藍色塊添加父元素.box並添加聲明overflow: hidden;可以解決紅色塊和藍色塊的上下margin重疊問題。
原因：
通過給藍色塊添加父元素.box並添加聲明overflow: hidden;，使得父元素.box觸發了BFC（見BFC觸發條件3），此時紅色塊和藍色塊屬於不同的BFC，紅色塊的BFC仍然是根元素（<html>），藍色塊的BFC是父元素.box。即不滿足BFC特性1中的規定“屬於同一個BFC······”，從而解決了兩者的上下margin重疊問題。
注：overflow: hidden;只是觸發BFC衆多條件中的一個，使用其他條件也能解決此問題，注意觸發條件可能造成的其他影響即可，如浮動會造成的脫離文檔流等。
特性2：計算BFC高度時浮動元素也參於計算
功能：可解釋爲何overflow: hidden;能解決父元素高度塌陷
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.outside{
border: 10px solid blue;
}
.inside{
width: 200px;
height: 200px;
background: yellowgreen;
float: left;
}
</style>
</head>
<body>
<div class="outside">
<div class="inside"></div>
</div>
</body>
</html>
代碼渲染效果如下：
現象：
當父元素.outside沒有設置高度且子元素.inside都浮動時，父元素.outside會出現高度塌陷。
原因：
子元素.inside設置浮動後脫離文檔流，而父元素.outside又沒有設置高度，故父元素.outside會出現高度塌陷。
通過BFC特性解決高度塌陷問題：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.outside{
border: 10px solid blue;
overflow: hidden;
}
.inside{
width: 200px;
height: 200px;
background: yellowgreen;
float: left;
}
</style>
</head>
<body>
<div class="outside">
<div class="inside"></div>
</div>
</body>
</html>
代碼渲染效果如下：
現象：
給父元素.outside添加聲明overflow: hidden;，父元素高度塌陷消失。
原因：
給父元素.outside添加聲明overflow: hidden;，使得父元素.outside觸發了BFC（見BFC觸發條件3），而BFC特性規定“計算BFC高度時浮動元素也參於計算”，此時子元素.inside雖然設置了浮動，但其高度仍計算至父元素內，從而解決了高度塌陷問題。
特性3：BFC的區域不會與浮動容器發生重疊
功能：在佈局上實現自適應兩欄（三欄）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.left{
width: 100px;
height: 200px;
background: yellowgreen;
float: left;
}
.right{
height: 300px;
background: blue;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
代碼渲染效果如下：
現象：
正常情況下，左側元素.left浮動時，會與右側元素.right發生重疊，不能實現自適應兩欄效果。
原因：
左側元素浮動，脫離文檔流。
通過BFC特性解決重疊問題：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.left{
width: 100px;
height: 200px;
background: yellowgreen;
float: left;
}
.right{
height: 300px;
background: blue;
overflow: hidden;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
代碼渲染效果如下：
現象：
給右側元素.right添加聲明overflow: hidden;，左右側元素重疊消失，實現自適應兩欄效果。
原因：
給右側元素.right添加聲明overflow: hidden;，使得右側元素觸發了BFC（見BFC觸發條件3），而BFC特性規定“BFC的區域不會與浮動容器發生重疊”，從而解決了重疊問題，實現自適應兩欄效果。
特性4：BFC內的容器在垂直方向依次排列
類似正常情況下塊元素在垂直方向上依次排列，較易理解。
特性5：元素的margin-left與其包含塊的border-left相接觸
基本現象，較易理解。
特性6：BFC是獨立容器，容器內部元素不會影響容器外部元素
較易理解。
BFC功能總結
1、可以利用BFC解決兩個相鄰元素的上下margin重疊問題；
2、可以利用BFC解決高度塌陷問題；
3、可以利用BFC實現多欄佈局（兩欄、三欄、聖盃、雙飛翼等）。