一、概念：
BFC(Block Formatting Context)：块级格式化上下文。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
（注释：block-level box：其display属性为block，list-item，table的元素，会生成block-level box）
二、性质：
1.计算BFC的高度时，浮动元素也会参与计算。
2.内部的box会在垂直方向，一个接一个地放置。
3.box垂直方向的距离由margin决定。属于同一个BFC的两个相邻box的margin会发生重叠。
4.BFC的区域不会与float box重叠。
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
三、构建（满足其中一条）
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible
四、作用
1.利用BFC避免margin重叠。
2.自适应两栏布局。
3.清除浮动。
4.阻止元素被浮动元素覆盖。