什么是BFC？BFC有什么作用？

1.BFC概念

BFC(block formatting context)块级上下文，他是页面中的一块渲染区域，并且有一套属于自己的渲染规则，BFC 是一个独立的布局环境，具有BFC特性的元素可以看作是隔离的独立容器，容器里面的元素不会在布局上影响到外面的元素。

2.使元素形成BFC的方式如下：

• 浮动元素(元素的float不是none)
• 绝对定位元素（元素的position为absolute 或 fixed)
• display为inline-block、table-cell、table-caption、table、table-row、table-row-group、table-header-group、table-footer-group、inline-table、flow-root、flex或 inline-flex、grid或 inline-grid
• overflow值不为visible的块元素
• contain 值为layout、content 或 paint的元素
• 多列容器（元素的column-count或 column-width 不为auto，包括 column-count为1)

3.作用

1、解决margin塌陷的问题
2、避免外边距margin重叠（margin合并）
3、清除浮动
4、阻止元素被浮动元素覆盖