CSS基础：BFC

一、概念：

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.阻止元素被浮动元素覆盖。