L6.Margin collapse Summary 边界重叠

边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。注意：相邻的盒模型可能由DOM元素动态产生并没有相邻或继承关系。

普遍计算法则：最终的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。

（注：为了方便测试，样式直接写在html里）

collapsing具有传递性，A、B、C元素发生边界重叠，要一起计算，不能两两计算。

<div style="margin:50px 0;  width:50px;">

    <div style="margin:-60px 0;">

           <div style="margin:150px 0;">A</div>

    </div>

</div>

<div style="margin:-100px 0;  width:50px;">

    <div style="margin:-120px 0;">

           <div style="margin:200px 0;">B</div>

    </div>

</div>

http://jsfiddle.net/smilingblueberry/P3e25/

正值：50px，150px，200px
负值：-60px，-100px，-120px
根据有正有负时的计算规则，正值的最大值为 200px，负值中绝对值最大的是-120px，所以，最终折叠后的margin应该是 200 + (-120) = 80px。

 元素自身的margin-bottom和margin-top相邻时也会折叠

<div style="border:1px solid red; width:100px;">

    <div style="margin-top:50px;margin-bottom:50px;"></div>

</div>

不会发生折叠的情况：

1、外边距的重叠只产生在普通流文档(in-flow，非浮动元素，非定位元素)的上下外边距之间，水平边距永远不会重合（Horizontal margins never collapse.-->CSS3貌似更改了这项规定）

3、相邻的盒模型中，如果其中的一个是浮动的（float），垂直margin不会重叠，并且浮动的盒模型和它的子元素之间也是这样。

<div style="margin-bottom:50px; width:50px; height:50px; background-color:green;">A</div>

<div style="margin-top:50px; width:100px; height:100px; background-color:green; float:left;">

    <div style="margin-top:25px; height:50px;background-color:gold;">B</div>

</div>

创建了块级格式化内容的元素（4 5 6）
4、设置了overflow属性的元素和它的子元素之间的margin不被重叠（overflow取值为visible除外）。

<div style="margin-top:50px; width:100px; height:100px; background-color:green; overflow:hidden;">

    <div style="margin-top:25px; background-color:gold;height:25px;">B</div>

</div>
5、设置了绝对定位（position:absolute）的盒模型，垂直margin不会被重叠，并且和他们的子元素之间也是一样。

<div style="top:50px; width:100px; height:100px; background-color:green; position:absolute;">

    <div style="margin-top:25px; background-color:gold;height:25px;">B</div>

</div>
6、设置了display:inline-block的元素，垂直margin不会重叠，甚至和他们的子元素之间也是一样。

<div style="margin:50px 0; width:10px; height:50px; background-color:green;">

</div>

<div style="margin-top:50px; width:100px; height:100px; background-color:green; display:inline-block">

    <div style="margin-top:25px; background-color:gold;height:25px;">B</div>

</div>
7、如果一个盒模型的上下margin相邻，这时它的margin可能重叠覆盖（collapse through）它。在这种情况下，元素的位置（position）取决于它的相邻元素的margin是否重叠。
a、如果元素的margin和它的父元素的margin-top重叠在一起，盒模型border-top的边界定义和它的父元素相同。

在没有被分隔开的情况下，一个元素margin-top会和它普通流中的第一个子元素(非浮动元素等)的margin-top相邻；只有在一个元素的height是”auto”的情况下，它的margin-bottom才会和它普通流中的最后一个子元素(非浮动元素等)的margin-bottom相邻。

Exp

<div style="border:1px solid red; width:100px;">

    <div style="margin:50px 0; background-color:green; height:50px; width:50px;">

       <div id="cen" style="margin:20px 0;">

           <div style="margin:100px 0;">B</div>

       </div>

    </div>

</div>

如果一个元素的height特性的值不是 auto，那么它的margin-bottom和它的子元素的margin-bottom不算是相邻，因此，不会发生折叠。
margin-top 没有此限制，所以是 100px，margin-bottom 没有折叠，所以只有 50px。

b、另外，任意元素的父元素不参与margin的重叠，或者说只有父元素的margin-bottom是参与计算的。如果元素的border-top非零，那么元素的border-top边界位置和原来一样。
一个应用了清除操作的元素的margin-top绝不会和它的块级父元素的margin-bottom重叠。
注意，那些已经被重叠覆盖的元素的位置对其他已经重叠的元素的位置没有任何影响；只有在对这些元素的子元素定位时，border-top边界位置才是必需的。
8、根元素的垂直margin不会被重叠。

CSS3中与上述不一致的规定（左右margin可以折叠了？）

• The left margin of a box A collapses with the left margin of its parent box B if the margins are adjoining and B is ‘rl’ or ‘lr’.

• The right margin of a box A collapses with the right margin of its parent box B if the margins are adjoining and B is ‘rl’ or ‘lr’.

• A right margin of a box A collapses with the left margin of a sibling box B if the margins are adjoining and their parent is ‘rl’ or ‘lr’.
• The left and right margins of a box A collapse (“collapse through”) if the margins are adjoining and the box is ‘rl’ or ‘lr’.

　　In this case, the position of the element depends on its relationship with the other elements whose margins are being collapsed.

• • If A's parent is ‘rl’:
    • If A's margins are collapsed with its parent's right margin, the right border edge of A is defined to be the same as the parent's.
    • Otherwise (i.e., either the element's parent is not taking part in the margin collapsing, or only the parent's left margin is involved), the position of A's right border edge is the same as it would have been if A had a nonzero top border.
  • If A's parent is ‘lr’:
    • If A's margins are collapsed with its parent's left margin, the left border edge of A is defined to be the same as the parent's.
    • Otherwise (i.e., either the element's parent is not taking part in the margin collapsing, or only the parent's right margin is involved),, the position of A's left border edge is the same as it would have been if A had a nonzero left border.

防止外边距重叠解决方案：
虽然外边距的重叠有其一定的意义，但有时候我们在设计上却不想让元素之间产生重叠，那么可以有如下几个建议可供参考：

1. 外层元素padding代替
2. 内层元素透明边框 border:1px solid transparent;
3. 内层元素绝对定位 postion:absolute:
4. 外层元素 overflow:hidden;
5. 内层元素 加float:left;或display:inline-block;
6. 内层元素padding:1px;

参考：http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html

http://www.hujuntao.com/web/css/css-margin-overlap.html