BFC的基本概念: 通俗的讲，就是一个特殊的块，内部有自己的布局方式，不受外边元素的影响。
BFC原理:
- BFC内部的盒子，会在垂直方向，一个接一个地放置。垂直方向上也会发生边距重叠。
- BFC就是页面上的一个独立容器，容器里面的子元素不会影响到外面的元素，外边的也不会影响里边的。
- BFC的区域不会与float box重叠。
- 计算BFC的高度时，浮动元素也被计算在内。
BFC如何产生:
在box属性值为这些的情况下，都会让所属的box产生BFC。
- overflow: auto/ hidden;
- position: absolute/ fixed;
- float: left/ right;
- display: inline-block/ table-cell/ table-caption/ flex/ inline-flex
BFC的使用场景
1. 可以用来自适应布局
2.可以清除浮动
3.解决垂直边距重叠
BFC
原文：https://www.cnblogs.com/swjRH/p/13569335.html
