深究盒模型的margin合并问题

1.首先，了解一些词汇

- 流内元素?
如果一个元素是浮动的，绝对定位的或者是根元素，那么它就是流外元素。即我们常说的脱离文档流的元素。如果一个元素不是流外的，即仍在文档流中的元素，就叫流内元素。
- 流内块级盒?
流内块级盒，就是流内块级元素生成的一个盒。
- 什么是格式化上下文？
常规流中的盒属于一个格式化上下文，可能是块或是内联，但不能都是（既是块又是内联）。块级盒参与块格式化上下文。内联级盒参与内联格式化上下文 。在一个块格式化上下文中，盒在竖直方向一个接一个地放置，从包含块的顶部开始。两个兄弟盒之间的竖直距离由margin属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并。
新建块级格式化上下文（BFC)的条件：

• 浮动元素，float除了none以外的值。
• 绝对定位元素，position(absolute,fixed)
• display 为以下其中之一的值 inline-blocks，table-cells，table-captions
• overflow 除了 visible 以外的值（hidden，auto，scroll）
• 注意："display:table" 本身并不产生 BFC，而是由它产生匿名框，匿名框中包含 "display:table-cell" 的框会产 BFC。

- 行盒（line box）
在一个行内格式化上下文中，盒是一个接一个水平放置的，从包含块的顶部开始。这些盒之间的水平margin，border和padding都有效。盒可能以不同的方式竖直对齐：以它们的底部或者顶部对齐，或者以它们里面的文本的基线对齐。包含来自同一行的盒的矩形区域叫做行盒
- 相邻的margin?
两个margin是相邻的，当且仅当：

• 都属于流内块级盒，处于同一个块格式化上下文。
• 没有行盒（line box），没有空隙，没有padding并且没有border把它们隔开（注意，因此某些0高度行盒）

• 都属于竖直相邻盒边（vertically-adjacent box edges），即来自下列某一对：

  * 一个盒的top margin和它的第一个流内子级的top margin
  * 一个盒的bottom margin和它的下一个流内后面的兄弟（its next in-flow following sibling）的top margin
  * 最后一个流内子级的bottom margin和它的父级的bottom margin，如果父级的高度的计算值为'auto'
  * 一个盒的top和bottom margin，该盒没有建立一个新的块格式化上下文并且min-height的计算值为0，height的计算值为0或者'auto'，并且没有流内子级

• 如果一个margin的任何部分margin与另一个margin相邻的话，就认为它与那个margin相邻，是合并（collapsed）margin。

2.什么是margin合并（重叠）

       在CSS中，两个或者多个盒（可能但不一定是兄弟）的相邻的margin会被结合成一个margin。Margin按这种方式结合叫合并（collapse），产生的结合的margin叫做合并margin。

3.合并的规则

1. 相邻的竖直margin会合并，除了：

   • 根元素的盒的margin不合并
   • 如果一个有空隙（clearance）的元素的top和bottom margin是相邻的，它的margin会与紧跟着的兄弟的相邻margin合并，但产生的margin不会与父级块的bottom margin合并
2. 水平margin不会合并

合并的计算规则

• 当两个或者更多的margin合并时，产生的margin宽度为合并margin宽度中的最大值。
• 至于负margin，就从正相邻margin的最大值中减去负相邻margin的绝对值的最大值。
• 如果没有正margin，就用0减去相邻margin的绝对值的最大值

4.总结

所以综上所述，只要两个margin被隔开了，就一定不会发生margin重叠。可以是上下border隔开，可以是被上下padding隔开，也可以是被高度隔开，可以是被流内子级隔开，可以被空隙（空隙的产生与clear有关）隔开，可以被新建立的格式化上下文隔开。

以下是css2.1规范的总结

• 一个浮动的盒与任何其它盒之间的margin不会合并（甚至一个浮动盒与它的流内子级之间也不会）任何浮动的、绝对定位的盒子不会与任何其他盒子的margin合并(原因：它们是流外块级盒）。
• 建立了新的块格式化上下文的元素（例如，浮动盒与overflow不为'visible'的元素）的margin不会与它们的流内子级合并。（原因：不在同一个块级格式化上下文）
• 绝对定位的盒的margin不会合并（甚至与它们的流内子级也不会）把绝对定位的盒子比作飞起来的盒子，那么这两个飞起来的盒子，一定处于不同高度，因此，不管这个盒子如何移动，都不会影响任何一个飞起来的盒子。
• 内联盒的margin不会合并（甚至与它们的流内子级也不会）
• 一个流内块级元素的bottom margin总会与它的下一个流内块级兄弟的top margin合并，除非兄弟有空隙
• 一个流内块级元素的top margin会与它的第一个流内块级子级的top margin合并，如果该元素没有top border，没有top padding并且该子级没有空隙
• 一个'height'为'auto'并且'min-height'为0的流内块级盒的bottom margin会与它的最后一个流内块级子级的bottom margin合并，如果该盒没有bottom padding并且没有bottom border并且子级的bottom margin不与有空隙的top margin合并
• 盒自身的margin也会合并，如果'min-height'属性为0，并且既没有top或者bottom border也没有top或者bottom padding，并且其'height'为0或者'auto'，并且不含行盒，并且其所有流内子级的margin（如果有的话）都合并了。
• 如果盒的top和bottom margin相邻，那么可能会被彻底合并（collapse through）

margin。此时，元素的位置取决于与其它margin被合并了的元素的关系

• 如果该元素的margin与其父级的top margin合并了，盒的top border边被定义为与其父级的相同

否则，要么该元素的父级没有参与margin合并，要么只涉及其父级的bottom margin。如果该元素的bottom border不为0的话，其top border边的位置将正常显示（the same as it would have been）。
注意，已被彻底合并了的元素的位置不影响其它margin被合并的元素的位置，只有在布局这些元素的后代时，才需要top border边的位置。

整理自css2.1规范：[http://www.ayqy.net/doc/css2-...]
以及：[http://www.jianshu.com/p/52a2...]