BFC全稱 Block Formatting Context；
block-level box:display 屬性為 block, list-item, table 的元素，會(huì)生成 block-level box。并且參與 block fomatting context；
每個(gè)渲染區(qū)域用formatting context表示，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用；
總結(jié)就是：BFC是一個(gè)獨(dú)立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個(gè)區(qū)域外部毫不相干。
哪些元素生成 BFC
1.根元素；
2.float屬性不為none；
3.position為absolute或fixed；
4.display為inline-block, flex, 或者inline-flex；
5.overflow不為visible；
BFC的特性
- 內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置
- Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊
- 每個(gè)元素的margin box的左邊，與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此
- BFC的區(qū)域不會(huì)與float box重疊
- BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此
- 計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算
BFC的作用
1.防止margin 重疊
2.清除浮動(dòng)
示例：
1.防止margin 重疊
查看下兩個(gè)div元素的margin是否重疊
通過(guò)查看，我們發(fā)現(xiàn)兩個(gè)塊級(jí)元素的之間的margin所形成的距離并不是200px，而是100px，兩個(gè)div 元素的margin發(fā)生了重疊；
我們可以在div元素外面包裹一層容器，并觸發(fā)該容器生成一個(gè)BFC。那么兩個(gè)div便不屬于同一個(gè)BFC，就不會(huì)發(fā)生margin重疊了
通過(guò)查看，兩個(gè)div元素之前的margin距離為200px，沒(méi)有發(fā)生重疊；
2.清除浮動(dòng)
先寫一個(gè)浮動(dòng)：
因?yàn)楦冈馗兄坏礁?dòng)元素的存在，并且父元素沒(méi)有設(shè)置高度，導(dǎo)致浮動(dòng)元素?zé)o法撐起來(lái)父元素，所以父元素的高度為0；
我們通過(guò)將父元素觸發(fā)為一個(gè)BFC，來(lái)清除浮動(dòng)，因?yàn)橛?jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算；
如圖所示，父元素被撐開(kāi)，高度為div元素的高度100px；
