什么是margin塌陷？
需求：在父盒子元素中，通过magin 让父元素相对左边及顶部各距离100px，也让子元素相对于父元素左边和顶部各50px
代码如下：
image.png
效果：
image.png
结果：
水平方向的距离确实没问题，但是垂直方向上，明明子元素设置了margin-top 距离顶部50px，按道理它会距离父元素顶部50px才对
这种现象被称之为margin塌陷，上述例子中，原本子元素要距离父元素顶部50px，但是没有了，也就是父元素的顶棚对子元素没有作用， 相当于没有了，相当于塌陷下来了，所以叫做margin塌陷
一句话总结：父子嵌套的元素垂直方向的margin取最大值
解决margin塌陷的办法:
可以通过触发BFC来解决
什么是BFC？
Block Formatting Context 中文叫会计格式化上下文
css将HTML的每一个元素都当成一个盒子，而且它进一步的认为每一个盒子里面都有一套正常的语法规则或者渲染规则，它能根据这个规则将写出来的HTML元素绘制出来，但是我们可以通过一些特定的手段触发BFC，让其所符合的语法规则和原来的语法规则有点不一样
也就是说触发BFC之后，特定的盒子会遵循另一套语法规则。
BFC听起来挺神奇，能改变一个盒子的语法规则，那到底改变了多少呢，其实也没改变多少，可能千分之一都不到。也就是它只改变了一点点，但是就是这一点它把margin塌陷和margin合并的问题解决了
如何触发BFC?
小结触发BFC方法？
image.png
原则：针对需求，看哪个触发方式没有影响就用那个
什么是margin合并？
例子：把两个兄弟块元素，一个设置下边距100px，一个设置上边框100px，让两个元素相距200px
image.png
结果如下：
image.png
结果发现这两个元素之间，他们的margin-bottom和margin-top合并了，并且显示的是较大值，这种现象被称为margin合并，解决的方式也是通过触发bfc来解决
解决margin合并：
image.png
解决margin塌陷：
通过overfl：hidden触发BFC
image.png
