子元素margin-top使得父元素下移

一、为什么会出现这种情况

规范这样说，我也没办法……

　　 1、所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。
毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。

　　 2、一个盒子如果没有上补白(padding-top)和上边框(border-top)，
那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

　　　3、父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.

就会不断一层一层的找自己“领导”(父元素，祖先元素)的麻烦。

二、出现这种情况的解决方案　　

　　　　1、在父级中加入一个空的div放在第一个儿子节点上

　　　　2、父级进行设置padding-top:1px,border-top:1px,来辖制第一个子节点

　　　　3、父级设置overflow：hidden属性（超出的部分被隐藏起来了，这就是所谓的溢出隐藏属性）