一、BFC是什么？
官方定義
BFC（Block Formatting Context，塊格式化上下文） 是Web頁面的可視化CSS渲染的一部分，是塊盒子的布局過程發(fā)生的區(qū)域，也是浮動元素與其他元素交互的區(qū)域。
詳見MDN
看不明白？那就對了！
官方解釋若不搞得抽象難懂些，怎能顯出高大上？?。ㄊ謩踊?/em>
個人理解
1、BFC是一個獨立的布局環(huán)境，BFC內(nèi)部的元素布局與外部互不影響；
2、可以通過一些條件觸發(fā)BFC，從而實現(xiàn)布局上的需求或解決一些問題；
3、可以將BFC想象成一個工具，無需探究其定義，只要著重理解其功能（特性）即可。
二、BFC有什么用？
BFC的觸發(fā)條件
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的區(qū)域不會與浮動容器發(fā)生重疊（重點）
4、BFC內(nèi)的容器在垂直方向依次排列
5、元素的margin-left與其包含塊的border-left相接觸
6、BFC是獨立容器，容器內(nèi)部元素不會影響容器外部元素
注：其中1、2、3需重點理解，其特性和功能下面將用代碼逐個演示；
??????????????4、5、6為基本現(xiàn)象，按字面意思理解即可，不做重點說明。
特性1：屬于同一個BFC的兩個相鄰容器的上下margin會重疊
功能：可解釋為何相鄰兩容器上下外邊距會發(fā)生重疊
<!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>
代碼渲染效果如下：
現(xiàn)象：
當(dāng)給紅色塊下外邊距margin-bottom，給藍(lán)色塊上外邊距margin-top時，上下外邊距會發(fā)生重疊，兩個色塊的間距解析為兩者中的較大值（60px）。
原因：
此時紅色塊和藍(lán)色塊屬于同一個BFC，即根元素（<html>）。BFC的特性1規(guī)定 “屬于同一個BFC的兩個相鄰容器的上下margin會重疊”，故兩者上下邊距發(fā)生重疊。
通過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>
代碼渲染效果如下：
現(xiàn)象：
給藍(lán)色塊添加父元素.box并添加聲明overflow: hidden;可以解決紅色塊和藍(lán)色塊的上下margin重疊問題。
原因：
通過給藍(lán)色塊添加父元素.box并添加聲明overflow: hidden;，使得父元素.box觸發(fā)了BFC（見BFC觸發(fā)條件3），此時紅色塊和藍(lán)色塊屬于不同的BFC，紅色塊的BFC仍然是根元素（<html>），藍(lán)色塊的BFC是父元素.box。即不滿足BFC特性1中的規(guī)定“屬于同一個BFC······”，從而解決了兩者的上下margin重疊問題。
注：overflow: hidden;只是觸發(fā)BFC眾多條件中的一個，使用其他條件也能解決此問題，注意觸發(fā)條件可能造成的其他影響即可，如浮動會造成的脫離文檔流等。
特性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>
代碼渲染效果如下：
現(xiàn)象：
當(dāng)父元素.outside沒有設(shè)置高度且子元素.inside都浮動時，父元素.outside會出現(xiàn)高度塌陷。
原因：
子元素.inside設(shè)置浮動后脫離文檔流，而父元素.outside又沒有設(shè)置高度，故父元素.outside會出現(xiàn)高度塌陷。
通過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>
代碼渲染效果如下：
現(xiàn)象：
給父元素.outside添加聲明overflow: hidden;，父元素高度塌陷消失。
原因：
給父元素.outside添加聲明overflow: hidden;，使得父元素.outside觸發(fā)了BFC（見BFC觸發(fā)條件3），而BFC特性規(guī)定“計算BFC高度時浮動元素也參于計算”，此時子元素.inside雖然設(shè)置了浮動，但其高度仍計算至父元素內(nèi)，從而解決了高度塌陷問題。
特性3：BFC的區(qū)域不會與浮動容器發(fā)生重疊
功能：在布局上實現(xiàn)自適應(yīng)兩欄（三欄）
<!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>
代碼渲染效果如下：
現(xiàn)象：
正常情況下，左側(cè)元素.left浮動時，會與右側(cè)元素.right發(fā)生重疊，不能實現(xiàn)自適應(yīng)兩欄效果。
原因：
左側(cè)元素浮動，脫離文檔流。
通過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>
代碼渲染效果如下：
現(xiàn)象：
給右側(cè)元素.right添加聲明overflow: hidden;，左右側(cè)元素重疊消失，實現(xiàn)自適應(yīng)兩欄效果。
原因：
給右側(cè)元素.right添加聲明overflow: hidden;，使得右側(cè)元素觸發(fā)了BFC（見BFC觸發(fā)條件3），而BFC特性規(guī)定“BFC的區(qū)域不會與浮動容器發(fā)生重疊”，從而解決了重疊問題，實現(xiàn)自適應(yīng)兩欄效果。
特性4：BFC內(nèi)的容器在垂直方向依次排列
類似正常情況下塊元素在垂直方向上依次排列，較易理解。
特性5：元素的margin-left與其包含塊的border-left相接觸
基本現(xiàn)象，較易理解。
特性6：BFC是獨立容器，容器內(nèi)部元素不會影響容器外部元素
較易理解。
BFC功能總結(jié)
1、可以利用BFC解決兩個相鄰元素的上下margin重疊問題；
2、可以利用BFC解決高度塌陷問題；
3、可以利用BFC實現(xiàn)多欄布局（兩欄、三欄、圣杯、雙飛翼等）。
