简介：什么是BFC？
BFC(Block Formatting Context)的英文缩写简称，block可以理解为一个简单的盒模型， Formatting Context则为block的上下文渲染环境。其作用是使内部元素的布局不受外部元素影响。
BFC的触发条件：
- 根元素,也就是html根标签；
- position：fixed/absoluted;
- float属性值不是none的；
- overflow属性值不是visible的；
- display属性值：inline-display/table-cell/table-caption/flex/inline-flex;
BFC作用：
- bfc内部元素的布局不受外部元素影响。
- bfc区域不会出现margin重叠
- bfc区域计算高度时候会自动计算浮动元素。
- bfc区域不会和浮动元素重合。
BFC的场景应用：
- 防止margin出现重叠：
这里可以很明显的看到div1的margin是生效了的，但是div2的margin在于1相邻的部分是没有起到作用的
在这里我们在div2外部套上一个div，并添加overflow：hidden属性，使其成为一个bfc区域，这样div2的margin也就生效了。
- 两栏布局，防止出现文字环绕效果：
在这里可以看到当div1设置为浮动后，会浮动在div2的上面，看起来像是div1被div2环绕包裹起来的感觉；
为div2添加一个包裹div并设置overflow属性，使其成为一个BFC区域，这样就可以避免出现文字环绕效果，并且可以实现自动实现两栏布局效果。
- 清除浮动，防止元素塌陷：
这个很好理解就是我们在页面布局的时候，如果不给父元素设置一个高度的话，子元素设置浮动后，子元素并不能将父元素的高度自动撑起来，这个时候给父元素设置一个overflow：hidden属性后，就可以起到清除浮动的作用。