BFC

BFC(Block Formatting Contexts)直译为"块级格式化上下文"。Block Formatting Contexts就是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。

如何产生BFC？

• body根元素就是一个BFC

• float的值为left，right，inherit。不为none。

• overflow的值为hidden，auto，scroll。不为visible。

• position的值为absolute，filexd。不为relative和static。

• display的值为inline-block、table-cell、table-caption，flex，inline-flex的元素。

BFC的作用

比如常见的多栏布局，结合块级别元素浮动，里面的元素则是在一个相对隔离的环境里运行。

同一个BFC下，外边距会发生重叠

为了避免这种问题可以将body下的两个div都设为BFC

BFC可以包含浮动的元素（清除浮动）

设置浮动会脱离普通文档流

由于容器内元素浮动，脱离了文档流。使容器触发BFC可以让容器包裹浮动元素

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

如下图左浮动元素覆盖在了一个没有浮动元素的上面

使用BFC避免元素被覆盖