BFC

BFC 全称为 Block Formatting Context

是什么意思呢？翻译过来生就是 “ 块级格式化上下文”

元素按照在HTML 中的先后位置自上而下布局

行内元素水平排列，直至当行被占满了然后换行，块级元素则会被渲染未完整的一个新行。

所有元素默认的都是普通定位

元素首先按照普通流的位置出现，然后根据浮动的方向可能的向左边或者右边偏移。

元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响。

BFC 是属于普通流，有自己独立渲染的规则。简单来说，可以把BFC 看成一个元素的属性，容器里面的元素不会在布局上影响到外面的元素

1、根元素（)

2、浮动元素（float 的属性值不为none）

3、绝对定位的元素（position 为 absolute 或者fixed ）

4、display 为inline-block 、 tabell-cell 等等

5、 overflow 值部位visible 的块级元素

6、contain 值不为layout 或者是 paint 的元素

这个时候，我们就发现了，第一个盒子的margin-bottom 和第二个盒子的 margin-top 怎么是 20px 而不是 40px 呢。首先这不是错误的，而是一种规范。块的上外边距margin-top 和下外边距margin-bottom 会合并为单个边距。而且会选择单个边距像素大的那个值。

如果这两个边距相等的话，就仅仅为其中的一个。

这就是外边距重叠现象。

解决办法，我们再加个父元素，然后加上用over-flow 来触发BFC 。

这个时候。我们就解决了外边距塌陷的问题

如图所示：

box1 设置浮动了之后，就脱离了文档流，父级元素的高度就为0 了这个时候我们使用over-flow 来触发 BFC。

这样就解决了浮动带来的影响了。

简单了解，希望有所帮助

简单了解——BFC