css BFC

BFC(Block Formatting Context)：块级格式上下文
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此

一、布局规则

1. 内部块级盒子（block-level box）垂直方向的间距由 margin 决定

   1. 同属于一个BFC的内部块级盒子垂直方向的 margin 会发生重叠。
   2. 可以通过将内部块级盒子变为BFC来解决margin重叠。

2. 每个内部块级盒子外边距左边界，与外部的BFC的左边界（注意是content的左边界，需要偏移掉BFC的内外边距和border）相接触，即使存在浮动也是如此

3. BFC不会与浮动盒子重叠

   1. 可用于解决2的左边界接触问题，实现双栏布局

4. 计算BFC的高度时，内部浮动盒子也参与计算

   1. 可以用于清除内部浮动盒子导致浮动高度塌陷问题

二、哪些属性会使得元素变为BFC

1. 根元素(body)
2. display 设置为inline-block, list-item, table
3. 设置为脱离文档标准流的属性
   （1）position: absolute, fixed
   （2）float: 不是none
4. overflow 不为 visible（例如设置为 hidden ）

BFC详细解析