CSS-BFC（块级格式化上下文）

BFC是一个独立的渲染区域，其内部的元素无论怎么摆放，都与外部毫不相干，相当于一个封闭的空间

哪些元素具有BFC的条件呢?

答： display属性为block，list-item, table的元素。
BFC常用的作用：

---

触发BFC：

根元素：html
overflow不为visible（最为常用）
float属性不为none
position属性为absolute或fixed
display属性为inline-block，table-cell，table-caption，flex，inline-flex

---

BFC的主要用途：

1、清除内部浮动：
平时一个父盒子不设宽高，内容由里面的元素撑起，那么当里面的元素浮动的时候，就无法撑起父元素的高度。
如果父元素触发了BFC，那么在计算父元素的高度时，也会自动检测浮动的盒子的高度，就不会出现由于子元素浮动撑不起父元素的高度问题了。

image.png

---

2、解决外边距合并问题
平时我们知道两个盒子间垂直方向的margin距离会发生合并，这时候就可以用到BFC了
当盒子不属于同一个BFC时，他们的margin就不会发生重叠。

image.png

image.png

---

3、BFC区域 不会和浮动的盒子产生交集，而是紧贴浮动盒子的边缘
平时当我们给一个块级元素设置了浮动，那么下面的盒子就会顶上来，这样下面的盒子我浮动的元素就有交集了
如果不想让他们有交集，给下面的盒子触发了BFC，那么下面的盒子会紧贴浮动盒子的边缘，他们就不会有交集

image.png