前端：對BFC的理解
一、BFC是什麼？
定義
BFC(Block Formatting Context)塊級格式化上下文，是Web頁面的視覺化css渲染的一部分，是塊盒子的佈局過程發生的區域，也是浮動元素與其他元素互動的區域。
它是一個獨立的渲染區域，只有Block-level box 參與，它規定了內部的Block-level box如何佈局，並且與這個區域外部毫不相干。
二、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.內部的Box會在垂直方向，一個接一個的放置；
2.BFC的區域不會與浮動容器發生重疊；
3.計算BFC的高度時，浮動元素也參與計算；
4.Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會重疊；
5.BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此；
6.元素的margin-left與其包含塊的border-left相接觸。
特性1：BFC內的容器在垂直方向依次排列，如下圖：
特性2：BFC的區域不會與浮動容器發生重疊
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 .left{ 8 width: 100px; 9 height: 200px; 10 background: yellowgreen;11 float: left; 12 } 13 .right{ 14 height: 300px; 15 background: blue; 16 } 17 </style> 18 </head> 19 <body> 20 <div class="left"></div> 21 <div class="right"></div> 22 23 </body> 24 </html>
現象：
正常情況下，左側元素.left浮動時，會與右側元素.right發生重疊，不能實現自適應兩欄效果。
原因：
左側元素浮動，脫離文件流。
解決方法：
給右側元素.right新增宣告overflow: hidden;，左右側元素重疊消失，實現自適應兩欄效果。
解決原因：
給右側元素.right新增宣告overflow: hidden;，使得右側元素觸發了BFC（見BFC觸發條件3），而BFC特性規定“BFC的區域不會與浮動容器發生重疊”，從而解決了重疊問題，實現自適應兩欄效果。
特性3：計算BFC高度時浮動元素也參於計算
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.outside{
border: 10px solid blue;
}
.par{
overflow:hidden;
}
.inside{
width: 200px;
height: 200px;
background: yellowgreen;
float: left;
}
</style>
</head>
<body>
<div class="outside par">
<div class="inside"></div>
</div>
</body>
</html>
現象：
當父元素.outside沒有設定高度且子元素.inside都浮動時，父元素.outside會出現高度塌陷。
原因：
子元素.inside設定浮動後脫離文件流，而父元素.outside又沒有設定高度，故父元素.outside會出現高度塌陷。
解決方法：
給父元素.outside新增宣告overflow: hidden;，父元素高度塌陷消失。
解決原因：
給父元素.outside新增宣告overflow: hidden;，使得父元素.outside觸發了BFC（見BFC觸發條件3），而BFC特性規定“計算BFC高度時浮動元素也參於計算”，此時子元素.inside雖然設定了浮動，但其高度仍計算至父元素內，從而解決了高度塌陷問題。
特性4：屬於同一個BFC的兩個相鄰容器的上下margin會重疊
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <style type="text/css">
7 .top{
8 width: 200px;
9 height: 200px;
10 background: red;
11 margin-bottom: 40px;
12 }
13 .bottom{
14 width: 200px;
15 height: 200px;
16 background: blue;
17 margin-top: 60px;
18 }
19 .box{
20 overflow:hidden;
21
22 }
23 </style>
24 </head>
25 <body>
26 <div class="top"></div>
27 <div class="bottom"></div>
28 <div class="box">
29
30 <div class="bottom"></div>
31
32 </div>
33 </body>
34 </html>
現象：
當給紅色塊下外邊距margin-bottom，給藍色塊上外邊距margin-top時，上下外邊距會發生重疊，兩個色塊的間距解析為兩者中的較大值（60px）。
原因：
此時紅色塊和藍色塊屬於同一個BFC，即根元素（<html>）。BFC的特性1規定 “屬於同一個BFC的兩個相鄰容器的上下margin會重疊”，故兩者上下邊距發生重疊
解決方法：
給藍色塊新增父元素.box並新增宣告overflow: hidden;可以解決紅色塊和藍色塊的上下margin重疊問題。
解決原因：
通過給藍色塊新增父元素.box並新增宣告overflow: hidden;，使得父元素.box觸發了BFC（見BFC觸發條件3），此時紅色塊和藍色塊屬於不同的BFC，紅色塊的BFC仍然是根元素（<html>），藍色塊的BFC是父元素.box。即不滿足BFC特性1中的規定“屬於同一個BFC······”，從而解決了兩者的上下margin重疊問題。
特性5：BFC是獨立容器，容器內部元素不會影響容器外部元素
特性6：元素的margin-left與其包含塊的border-left相接觸
BFC功能總結
1、可以利用BFC解決兩個相鄰元素的上下margin重疊問題；
2、可以利用BFC解決高度塌陷問題；
3、可以利用BFC實現多欄佈局（兩欄、三欄、雙飛翼等）。