为何子元素的margin-top会传递给父元素？

Question

如下面所示，child的margin-top传递到了parent上，这是为何？这应该是跟垂直margin的合并机制有关，这种父子之间的合并的规则是怎样的？
demo

Answer 1

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。比较浅的规则详见：w3schoolCSS外边距合并。以下皆为这里部分内容的引用，其实是W3C的相应规则的翻译。margin折叠的产生有几个条件：这些margin都处于普通流中，并在同一个BFC中；这些margin没有被非空内容、padding、border或clear分隔开；这些margin在垂直方向上是毗邻的，包括以下几种情况：1、一个box的topmargin与第一个子box的topmargin2、一个box的bottommargin与最后一个子box的bottommargin，但须在该box的height为auto的情况下3、一个box的bottommargin与紧接着的下一个box的topmargin4、一个box的topmargin与其自身的bottommargin，但须满足没创建BFC、零min-height、零或者“auto”的height、没有普通流的子box垂直方向上毗邻的box不会发生折叠的情况：根元素的外边距不会参与折叠一个有clearance的box的上下margin毗邻，它会与紧接着的下一个box发生margin折叠，但折叠后的margin不会再与它们父box的bottommargin折叠折叠边距的计算当两个margin都是正值的时候，取两者的最大值；当margin都是负值的时候，取的是其中绝对值较大的，然后，从0位置，负向位移；当有正有负的时候，先取出负margin中绝对值中最大的，然后，和正margin值中最大的margin相加。但必须注意，所有毗邻的margin要一起参与运算，不能分步进行。知道了机制发生的条件，你应该知道如何防止外边距合并了吧。关于BFC和haslayout（IE6/7中类似于BFC的概念），详见hasLayout&&BlockFormattingContexts的3.3节。