外边距塌陷和合并

这就出现了外边距塌陷
为什么会出现这个呢
因为 BFC的布局规则 规定相邻的俩个盒子（父子关系 相邻的兄弟关系）会有内边距重叠
那么什么是BFC呢
全称是box-formatting-context (块级格式化上下文) 它是一个独立的渲染区域规定了内部block-level的盒子如何渲染并且不影响外部元素

这个例子中 body 这个标签 具有BFC的特点 但不是BFC

BFC的规则或者说是特点
1.独立且隔离的一个区域
2.里面的盒子垂直排列
3.属于同一个BFC相邻的俩个盒子（父子关系 相邻的兄弟关系）会有内边距重叠
4.BFC的区域不会与float重叠；
5.计算BFC的高度时，浮动元素也参与计算。