BFC (Block Fromatting Context) 块级格式化上下文

作用：

1.它是页面中一个独立的渲染区域，只有Block-Level box参与，它规定了内部的Block-Level box如何布局，并且与这个区域外部毫不相干
2.浮动元素参与高度计算
3.BFC区域不会与浮动元素重叠
4.BFC垂直方向边距不会发生重叠

如何形成BFC

1.float的值不是none。
2.position的值不是static或者relative。
3.display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4.overflow的值不是visible

解决了哪些问题

解决了外边距折叠，清浮动，多栏布局不予浮动元素相重叠