BFC

BFC的基本概念: 通俗的讲，就是一个特殊的块，内部有本身的布局方式，不受外边元素的影响。

BFC原理:

1. BFC内部的盒子，会在垂直方向，一个接一个地放置。垂直方向上也会发生边距重叠。
2. BFC就是页面上的一个独立容器，容器里面的子元素不会影响到外面的元素，外边的也不会影响里边的。
3. BFC的区域不会与float box重叠。
4. 计算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.解决垂直边距重叠