2、margin相邻折叠问题
在开发中，我们偶尔会遇到明明两个div都设置了margin，可是它们之间的距离就是不等于两个div的margin之间的和，这是为什么呢？其实是因为在某些情况下，两个或多个块元素的相邻边界（其间没有任何非空内容、padding、边框）会发生合并成单一边界，也就是标题说的折叠。
先来看看兄弟块级元素的折叠，如下图所示：
还要注意的是，父元素与其子元素之间也会发生折叠：
2个或多个块级相邻元素的外边距（margin）的折叠规则：
- 外边距都为正值时，取最大值
- 不全是正值时，则用正值减去（所有值的绝对值中）最大值
- 全为负值时，则取最小值
不发生折叠情况：
- 水平（左右）外边距不会折叠
- 浮动元素的外边距不会折叠，并且浮动元素与它的子元素之间也不会发生折叠
- 设置了overflow且值不为visible的块级元素与它的子元素之间的外边距也不会被折叠
- 绝对定位（position:absolute;）元素的margin不与任何margin发生折叠，并且与它的子元素之间的margin也不会发生折叠
解决折叠的方法：
- 外层元素用padding替代margin
- 外层元素设置overflow:hidden
- 内层元素加padding:1或者border
- 内层元素加浮动（float）或设为（display:inline-block）
- 内层元素使用绝对定位（position:absolute;）