定义：BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有 Block-level box 参 与， 它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干。
BFC布局规则 BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- BFC这个元素的垂直方向的边距会发生重叠，垂直方向的距离由
margin决定，取最大值 - BFC 的区域不会与浮动盒子重叠（
清除浮动原理）。 - 计算 BFC 的高度时，浮动元素也参与计算。
哪些元素会生成 BFC
- 根元素
- float 属性不为 none
- position 为 absolute 或 fixed
- display 为 inline-block， table-cell， table-caption， flex， inline-flex
- overflow 不为 visible
