一、问题描述
当两个盒子在垂直方向上设置margin值时，会出现一个有趣的塌陷现象。
如图示
代码
页面呈现
最初目的是垂直剧中子盒子的，为子盒子设置了 margin-top: -170px，但是发现 父盒子已经height: 100%了，但是却多出了一块空白。
百思不得其姐……
忽然灵机一动，怕不是碰上了灵异的 塌陷问题了吧，添加了个padding-top: 1px; 果然……
特此总结，留作纪念
二、解决方法
解决maigin塌陷问题（父子盒子塌陷）的方法有：
1.给父盒子添加border（好用）
2.给父盒子添加padding-top（好用）
3.给父盒子添加overflow:hidden（好用）
4.父盒子:position:fixed
（宽收到了影响，跟子盒子同宽了，设置 width: 100%; 可以）
5.父盒子:display:table （不管用，样式奇怪，不按照position的文档流 布局了）
6.给子元素的前面添加一个兄弟元素 属性为:content:""; overflow:hidden;(不管用)
解决maigin塌陷问题（兄弟盒子塌陷，即外边距合并问题）的方法有：
1、给上面的盒子加个margin-bottom 或 给下面的盒子加个margin-top（这个距离等于两个盒子之间的距离——这基本等于没解决。。）
2、至少一个元素浮动或者绝对定位（参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing）
解决后
