1：MarginMerging的场景我们从3个简单的例子来看MarginMerging：1、父子合并为h1增加了50px的margin，但实际上h1和div的margin合并到了一起2、相邻元素被合并，细节设置为30px边距，标题设置为30px边距。结果，两个相邻元素之间的距离被合并，合并后的宽度是边距值较大的那个。如下图，detail和header的边距合并后，边距为50px。3、与自己合并当元素内容为空时，元素设置的上下外边距会与自身合并。比如下面的例子，footer是空的，上下边距设置为30px，但实际上footer之间的距离只有30px，合并了上下边距。二、防止外边距合并的方法1、给父元素添加边框如下图在header中添加边框后，h1和header将不会有外边距合并。2.给父元素添加padding注意：合并相邻元素并添加padding和border是没用的3.形成BFC添加overflow:hidden到header形成BFC，外边距不再合并。但是overflow:hidden是有用的副作用，如果有二级菜单就会隐藏。当然，其他形成BFC的方法也可以生效，但是它们也有相应的副作用。如果使用float:left，宽度会缩小。需要设置宽度为100%demo
