CSS外边距合并导致margin越界的问题

　　外边距合并其实经常会遇到，这里稍微总结一下，以及一些相关的术语

一、什么是外边距合并？(折叠外边距)

　　外边距合并指的是当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者；而左右外边距不合并。

　　在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

　　注意：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

　　外边距带来的影响有很多种说法，有说是margin越界，或子元素越界，也有说是外边距塌陷，但其实本质上都是外边距合并的的表现。

　　折叠结果：

　　1、两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
　　2、两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
　　3、两个外边距一正一负时，折叠结果是两者的相加的和。

　　产生折叠的原因：

而根据w3c规范，两个margin是邻接的必须满足以下条件
4.1、必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC当中。
4.2、没有线盒，没有空隙（clearance，下面会讲到），没有padding和border将他们分隔开
4.3、都属于垂直方向上相邻的外边距，可以是下面任意一种情况：
a:元素的margin-top与其第一个常规文档流的子元素的margin-top
b:元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top
c:height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom
d:高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin-top和margin-bottom

二、margin越界解决方案

1、给父元素加边框border

2、给父元素设置padding

3、父元素添加overflow：hidden

　　上面3种看情况使用，因为有很多可能父元素不需要这些设置的场景，比如：

　　加border可以解决，但我并不需要这个border；

　　使用paddiing，如果盒模型是内容盒子的话增大了整个盒模型，如果为border盒子类型，可以解决但是并不理想。

　　使用 overflow:hidden，可是一般情况下都是子标签内容如果超出是显示的，不符合预想。

　　解决思路：主要是在父标签中添加第一个子标签，然后后面的子标签设置margin的时候就不会与父标签的margin重合。因为的margin是找到第一个子元素为基准的。所以重点推荐第4种

4、父元素加前置内容生成（推荐）

　　关键代码：使用伪类元素

父元素：before{
    content:' ';
    display:table;
}

　　table的显示模式我就不在这里说明。目前感觉这种方式的代价是最小的，基本没有其它的影响。

　　同理margin-bottom也是这样解决的。是给父元素添加最后一个子元素。就可以解决子元素的越界问题。