CSS解决外边距(margin)合并问题

问题：父元素的盒子包含一个子元素盒子，给子元素设置margin-top,父元素盒子也会往下走margin-top的值，而子元素和父元素的边距则没有发生变化。

原因：是因为父级元素与子元素的边距重叠了，如果元素的没有上边框或者上补白，那么它的上边距就会与它的第一个子元素的上边距重叠

　　　也就是说父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding，就会一层层找上一级的边距与之重合，把自己的margin当父级的margin执行。 

解决办法：

方案一：为父元素设置 overflow: hidden

方案二：为父元素设置padding

方案三：为父元素设置border

方案三：父元素或者子元素使用浮动或者绝对定位