一、概念
BFC 全称叫（Block Formatting Context）中文叫块级格式化上下文。 具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
二、触发 BFC
1.根元素，即HTML标签；
2.浮动元素：float值为left、right;
3.overflow值不为visible,为auto、scroll、hidden;
4.display值为inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid;
5.定位元素：position值为absolute、fixed
三、BFC的作用
1.相邻元素margin重叠问题
解决以上相邻元素margin重叠问题，可以将两个盒子分为不同的BFC中，给其中一个盒子外面再加一个容器，并加上 overflow: hidden;
2.父元素高度塌陷问题
上图 子元素设置浮动，脱离文档流，父元素无法撑开子元素的高度；如果触发容器的 BFC，那么父容器将会包裹着浮动的子元素，如下图：
3.阻止元素被浮动元素覆盖
两个相邻的元素，第一个设置浮动，第二个就被遮挡；解决上述问题 给被覆盖的第二元素加上overflow: hidden；如下图：
