父盒子跟随子盒子margin-top移动问题

问题：

当我们想给子元素设置margin-top时，发现子元素没有出现上外边距的效果，反而是父元素出现了上外边距的效果。

原因
根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。
说白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己父元素。直到找到父元素有有效的padding或border为止。

 

解决方法

 1.给父盒子设置padding-top

2.给父盒子设置border-top

3.给父盒子设置overflow: hidden

三种方法都可解决问题，一般推荐第三种，给父元素设置overflow：hidden