CSS margin重叠问题

margin重叠问题
两个块级元素的上外边距和下外边距可能会合并（折叠）为一个外边距，其大小会取其中外边距值大的那个，这种行为就是外边距折叠。需要注意的是，浮动的元素和绝对定位这种脱离文档流的元素的外边距不会折叠。重叠只会出现在垂直方向。
计算原则
如果两者都是正数，取较大的那个
如果一正一负，取正值减去负值后的绝对值
都是负值是，用0减去两个中绝对值大的那个
解决办法
对于折叠的情况，主要有两种：兄弟之间重叠和父子之间重叠
兄弟间折叠：

底部元素变为行内盒子：display: inline-block
底部元素设置浮动：float
底部元素的position的值为absolute/fixed
父子间的折叠：

父元素加入：overflow: hidden
父元素添加透明边框：border: 1px solid transparent
子元素变为行内盒子：display: inline-block
子元素加入浮动属性或定位