BFC

BFC（Block formatting context ）“块级格式上下文”。

是用于布局块级盒子的一块渲染区域，是一个独立的区域，与这个区域之外的部分毫无关系，BFC区域内部的元素如何布局如何设置也不会影响到区域外的元素。

简单来说，他就像在大海内独立的一座小岛，外界怎么样都不会影响到这座小岛，同样小岛内部如何折腾也不会对外界造成影响

 

触发BFC的条件（满足任意一条就可以实现）

1、根元素，也就是html元素；

2、float的值不为none；

3、overflow的值不为visible；

4、position的值为absolute或者fixed；

5、display的值为inline-block、flex、inline-flex、flow-root、table-caption、table-cell；

 

BFC的作用

1、BFC可以包含浮动的元素解决高度塌陷问题

2、解决在同一BFC区域两个盒子的margin重叠塌陷问题

3、BFC可以阻止元素被浮动元素覆盖