㈠什么是BFC？
BFC 全稱為 塊格式化上下文 (Block Formatting Context) 。
定義：浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級盒子，都會為他們的內容創建新的BFC（塊級格式上下文）。
㈡BFC的布局規則是什么？
1）內部的box會在垂直方向，一個接一個地放置（可以看作BFC中有一個的常規流）。
2）Box垂直方向的距離有margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
3）每個元素的margin box 的左邊，會包含塊border box的左邊相接觸（對於從左往右的格式化，否則相反），即使存在浮動也是如此
4）BFC的區域不會與float box 重疊
5）BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此
6）計算BFC的高度時，浮動元素也參與計算
㈢那些情況會產生新的BFC/如何創建BFC？
⑴根元素或其它包含它的元素
⑵浮動 (元素的 float 不為 none)
⑶絕對定位元素 (元素的 position 為 absolute 或 fixed)
⑷行內塊 inline-blocks (元素的 display: inline-block)
⑸表格單元格 (元素的 display: table-cell，HTML表格單元格默認屬性)
⑹表格標題 (元素的 display: table-caption, HTML表格標題默認屬性)
⑺overflow 的值不為 visible的元素
⑻彈性盒 flex boxes (元素的 display: flex 或 inline-flex)
㈣邊距重疊在什么時候或者什么情況下會發生呢？
⑴父與子之間：子級的上下margin會與父級上下margin重疊，以最大值為標准去渲染
⑵空元素：如果設置了margin-top和margin-bottom，它會在這兩之間取一個最大值作為它的最終邊距值
⑶兄弟元素之間：每個兄弟之間都有上邊距或者每個兄弟之間都有下邊距，原則就是取最大的值
㈤BFC與高度坍塌
⑴什么是高度坍塌？
父元素高度自適應，子元素 float 后，造成父元素高度為0，稱為高度塌陷問題。
⑵為什么坍塌？
float 脫離了普通流，並且創建了新的BFC，而父元素不具備產生 BFC 的條件，所以它的高度為0。
⑶如何用BFC解決高度坍塌？
通過了解BFC的特性我們知道，BFC會把它包含的浮動元素高度也算在里面，也就是閉合浮動。
拿 overflow: auto 舉例：
overflow: auto 並不會閉合浮動，而是 overflow: auto 會創建一個新的BFC，避免浮動的元素侵入其他元素。
注：在支持BFC的瀏覽器（IE8+，firefox，chrome，safari）通過創建新的BFC閉合浮動；
㈥BFC的常見作用是什么？
1.阻止外邊距折疊
問題案例：margin塌陷問題：在標准文檔流中，塊級標簽之間豎直方向的margin會以大的為准，這就是margin的塌陷現象。可以用overflow：hidden產生bfc來解決。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <head> <style> div{ width: 100px; height: 100px; background: lightblue; margin: 100px; } </style> </head> <body> <div></div> <div></div> </body> </html>
效果圖：
從效果上看，因為兩個div元素都處於同一個BFC容器下（這里指body元素），所以第一個div的下邊距和第二個div的上邊距發生了重疊，所以兩個盒子之間距離只有100px，而不是200px。
如果想要避免外邊距的重疊，可以將其放在不同的 BFC 容器中。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <head> <style> .container { overflow: hidden; } p { width: 100px; height: 100px; background: lightblue; margin: 100px; } </style> </head> <body> <div class="container"> <p></p> </div> <div class="container"> <p></p> </div> </body> </html>
效果圖：
2.包含浮動元素
問題案列：高度塌陷問題，在通常情況下父元素的高度會被子元素撐開，而在這里因為其子元素為浮動元素所以父元素發生了高度坍塌，上下邊界重合，這時就可以用BFC來清除浮動了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <body> <div style="border: 1px solid blue;"> <div style="width: 100px;height: 100px;background: red;float: left;"> </div> </div> </body> </html>
效果圖：
由於容器內元素浮動，脫離了文檔流，所以容器只剩下2px的邊距高度。如果觸發容器的BFC，那么容器將會包裹浮動元素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <body> <div style="border: 1px solid blue;overflow: hidden"> <div style="width: 100px;height: 100px;background: red;float: left;"> </div> </div> </body> </html>
效果圖：
3、阻止元素被浮動元素覆蓋
問題案例：div浮動兄弟這該問題：由於左側塊級元素發生了浮動，所以和右側未發生浮動的塊級元素不在同一層內，所以會發生div遮擋問題。可以給右側元素添加 overflow: hidden，觸發BFC來解決遮擋問題。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <body> <div style="height: 100px;width: 100px;float: left;background: lightblue"> 我是一個左浮動的元素 </div> <div style="width: 200px; height: 200px;background: pink"> 我是一個沒有設置浮動, 也沒有觸發 BFC 元素, 現在看看會發生什么效果吧，要仔細看。 </div> </body> </html>
效果圖：
這時候其實第二個元素有部分被浮動元素所覆蓋，但是文本信息不會被浮動元素所覆蓋，如果想避免元素被覆蓋，可觸發第二個元素的BFC特性，在第二個元素中加入overflow：hidden，就會變成：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <body> <div style="height: 100px;width: 100px;float: left;background: lightblue"> 我是一個左浮動的元素 </div> <div style="width: 200px; height: 200px;background: pink;overflow:hidden"> 我是一個沒有設置浮動, 也沒有觸發 BFC 元素, 現在看看會發生什么效果吧，要仔細看。 </div> </body> </html>
效果圖：
