如何理解BFC？

1.BFC是三个单词的简写(Block Formatting Context) 翻译过来就是块级格式执行上下文。

BFC是指浏览器中创建了一个独立的渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。

2.哪些元素会生成BFC

(1)根元素  (2)float属性不为none的时候  (3)定位：position为absolute 或fixed（4）display为inline-block，table-cell，table-caption，flex，inline-flex （5）overflow不为visible的时候

3.BFC的特点

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。通俗一点来讲，可以把 BFC 理解为一个封闭的大盒子，盒子内部的元素无论如何布局，都不会影响到外部的元素

4.使用场景

清除盒子垂直方向上外边距合并——盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子垂直方向的margin会发生重叠。

解决方法

给父元素设置overflow:hidden；会产生BFC
由于在计算BFC高度时，自然也会检测浮动的子盒子高度。所以当子盒子有高度但是浮动的时候，通过激发父盒子的BFC功能，会产生清除浮动的效果