要实现的效果：

得到的效果：

直接原因：可以看到，在这里，父元素没有兜住子元素的margin-top，但祖元素兜住了子元素的margin-top,父元素与祖元素的区别是祖元素有边框

根本原因：由于父元素没有边框（或内间距），导致父元素的盒模型没有边界，兜不住子元素margin

解决方法：给子元素一个高度为1px的哥哥元素：

其他解决办法：

1、为父元素增加padding-top样式（padding-top：1px） 

2、为父元素添加overflow：hidden；样式即可

3、为父元素或者子元素声明浮动（float：left） 

4、为父元素添加border（border:1px solid transparent） 

5、为父元素或者子元素声明绝对定位