外边距合并问题及解决办法

外边距合并，对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上边距会与子元素的上边距合并，合并后的外边距取两者中的较大者。即使父元素的上外边距为0，也会发生合并。

即为当父盒子里的子盒子给它一个margin值时，子盒子的移动会影响父盒子一起移动：
这里当子盒子给了margin-top: 100px时，没有达到预想效果，父盒子与子盒子一起向下移动100px

 

解决办法：

1. 为父元素定义上边框     例如：border：1px solid #fff；
2. 为父元素定义上内边框    例如：padding：1px；
3. 为父元素添加overflow：hidden；