什么是BFC、
塊級格式化上下文
Box 是 CSS 布局的對象和基本單位，頁面是由若干個Box組成的。
元素的類型 和 display 屬性，決定了這個 Box 的類型。不同類型的 Box 會參與不同的 Formatting Context。
Formatting Context （格式化上下文）是頁面的一塊渲染區域，并且有一套渲染規則，
決定了其子元素如何定位，以及和其他元素的關系和相互作用
Formatting Context 包含 BFC(Block formatting context); IFC (Inline formatting context)，
FFC (Flex formatting context) 和 GFC (Grid formatting context)
BFC范圍：一個BFC包含創建該上下文元素的所有子元素，但不包括創建了新BFC的子元素的內部元素。
BFC效果：BFC的最顯著的效果就是建立一個隔離的空間，斷絕空間內外元素間相互的作用
BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素，反之也如此，包括浮動和外邊距合并等等，有了這個特性我們布局的時候就不會出現意外情況了。
BFC布局規則
*BFC內，盒子依次垂直排列
*BFC內，兩個盒子的垂直距離有margin屬性決定，屬于同一個BFC的兩個相鄰Box的margin會發成重疊
【符合合并原則的margin合并后是使用最大的margin】
*BFC內，每個盒子的左外邊緣接觸內部盒子的左邊緣（對于從右到左的格式，右邊緣接觸）
即使存在浮動的情況下也是如此，除非創建新的BFC
*BFC的區域不會和float box重疊
*BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素，反之也是如此
*計算BFC的高度時,浮動元素也參與計算
如何創建BFC
*根元素
*浮動元素（float屬性不為none）
*絕對定位元素（position為absolute或fixed）
*overflow不為visible的塊元素
*內聯塊（元素具有display:inline-block）;
*表格單元格(元素具有 display: table-cell，HTML表格單元格默認屬性)
*表格標題 (元素具有 display: table-caption, HTML表格標題默認屬性)
BFC的應用
1.防止margin重疊（同一個BFC內的兩個相鄰的BOX的margin會發生重疊，觸發生成兩個BFC，即不會重疊）
2.清除內部浮動（創建一個新的BFC，因為根據BFC的規則，計算BFC的高度時，浮動元素也參與計算）
css浮動后的元素無論display是什么都默認為block，即使設置了inline也是block
方法一.使用overflow屬性清除浮動
先找到浮動盒子的父元素，添加屬性overflow：hidden,形成BFC，瀏覽器會給BFC創建隱式的外邊距來阻止他和浮動元素的外邊距疊加。
當給一個挨著浮動的BFC添加負外邊距，不會起作用
方法二：給浮動元素添加一個額外的標簽 .claer{clear: both}
a:內部標簽，會將這個浮動盒子高度重新撐開
b:外部標簽：會將這個浮動盒子的影響清除，但是不會影響父盒子
注意：一般情況下不會使用這個方式清除浮動，因為這種清除浮動會增加頁面的標簽，造成結構的混亂
方法三：使用偽元素來清除浮動（一般使用這種）
clearfix:after{
content:""?//設置內容為空
height:0?//高度為0
lineheight:
0?//行高為0
display:block?//將文本轉為塊級元素
visibility:hidden?//將元素隱藏
clear:both//清除浮動
}
clearfix{
zoom:1 // 為兼容IE
}
