一、概念:
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.阻止元素被浮动元素覆盖。