定义：
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有块级元素（Block-level box）参与， 它规定了内部的块级元素（Block-level box）如何布局，并且与这个区域外部毫不相干。
BFC布局规则
- 内部的box会在垂直方向，一个接一个的放置。
- box垂直方向的距离有margin决定。属于同一个BFC的两个相邻box的margin会发生重叠。
- 每个元素的左外边距与包含块的左边界相接触，即使浮动元素也是如此。
- BFC的区域不会与float的元素区域重叠。
- 计算BFC的高度时，浮动子元素也参与计算。
- BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
BFC能解决的问题
- 高度塌陷
- 外边距重叠
- 清除浮动
创建BFC的方式
- 根元素
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible( hidden,scroll,auto)
