1.什么是 BFC機(jī)制
BFC(Block Formatting Context)，塊級(jí)格式化上下文，是一個(gè)獨(dú)立的渲染區(qū)域，讓處于 BFC 內(nèi)部的元素與外部的元素相互隔離，使內(nèi)外元素的定位不會(huì)相互影響介劫。
2、觸發(fā)條件?
float的值不為none
overflow的值不為visible
display的值為table-cell案淋、tabble-caption和inline-block之一
position的值不為static或則releative中的任何一個(gè)
3座韵、規(guī)則
創(chuàng)建了BFC的元素中,在垂直方向上的margin會(huì)發(fā)生重疊。html元素就是一個(gè)BFC元素 (margin重疊)
BFC元素在頁(yè)面上是一個(gè)獨(dú)立的容器,外面的元素和里面的元素互不影響踢京。
?BFC元素不會(huì)和浮動(dòng)的元素重疊誉碴。(兩個(gè)元素自適應(yīng))
計(jì)算BFC元素的高度時(shí),里面浮動(dòng)元素的高度也會(huì)參與計(jì)算 (overflow:hidden可以清除浮動(dòng))
4、開發(fā)中的應(yīng)用
自適應(yīng)兩欄布局
阻止margin重疊（使用padding或在其中一個(gè)元素加父元素并并使他成為一個(gè)BFC）
? ? ? ? 效果如下（可做元素水平垂直居中）
可以包含浮動(dòng)元素 —— 清除內(nèi)部浮動(dòng)(清除浮動(dòng)的原理是兩個(gè) div都位于同一個(gè) BFC 區(qū)域之中)
效果
可以阻止元素被浮動(dòng)元素覆蓋
