BFC：Block Formatting Context（块级格式化上下文本）

W3C官方解释为：

BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，Block Formatting Context提供了一个环境，HTML在这个环境中按照一定的规则进行布局。BFC 是一块独立的渲染区域，只有它内部的块级盒子参与它的布局。这些块级盒子的布局方式不会受BFC外部布局的影响，同时它们也不会影响BFC外部的布局。

简单来说BFC就是一个独立不受外界干扰也不干扰外界的盒子

 触发 BFC 条件

1. float的值不是none。（给父盒子添加float，不推荐使用，不能随意给盒子设置浮动）
2. position的值不是static或者relative。（不推荐使用，不靠谱，位置不可能是定死的）
3. display的值是inline-block、inline-flex、flex。（不推荐，没有意义，不可以随便改变盒子为行内块，或其他弹性）
4. overflow的值为hidden。（推荐，不能满足所有场景，但是非常好的让盒子形成BFC的方法）

　BFC 的渲染规则

　　①： 内部的块级元素会在垂直方向，一个接一个地放置

　　②： 块级元素垂直方向的距离由margin 决定。属于同一个BFC的相邻元素的margin 会重叠

　 　③：  对于从左往右的格式化，每个元素（块级元素与行内元素）的左边缘，与包含块的左边缘相接触，(对于从右往左的格式化则相反)。即使包含块中的元素存在浮动也是如此，除非其中元素再生成一个BFC 

　　④： BFC的区域不会与浮动元素重叠。

　　⑤：BFC是一个隔离的独立容器，容器里面的子元素和外面的元素互不影响

　　⑥： 计算BFC容器的高度时，浮动元素也参与计算。
 

BFC能干嘛？

1、可以让重叠元素不重叠：

使用float，元素漂浮在另一个元素上时，可以用让元素触发BFC，因为BFC 是一块独立的渲染区域，所以可以挤开重叠的元素，让元素不被重叠

 2、可以撑开坍塌的元素

当父元素没有设置高度 的时候，高度是由内容撑开的，内容浮动之后，内容脱离标准文档流，父元素高度就会塌陷。这时候就可以让父元素触发BFC，因为计算BFC容器的高度时，浮动元素也参与计算。

3、不让垂直外边距合并（折叠）

由于参数BFC布局的是块级盒子，所以不出意料的，每个块级盒子占据一行，在垂直方向一个接一个的堆放；而由于BFC布局规则第一条，相邻块级盒子之间的外边距会折叠，所以正常的情况为左边，外边距被折叠了，我们可以将这两个盒子放在独立的BFC容器中，使它们不再相邻，那么他们的外边距就不会被折叠了

参考文章：https://blog.csdn.net/hfdxmz_3/article/details/105965245

参考文章：CSS基础之块级元素、块级盒子以及BFC - 掘金