css 子元素设置margin-top父元素会跟着移动(塌陷)

首先我们要搞清楚为什么父元素为什么回跟着移动。
原因是边距重叠了。
边距重叠：一个盒子和其子孙的边距重叠。根据规范，一个盒子如果没有上补白和上边框，那么它的上边距应该和其文档流中的第一个孩子元素的上边距重叠。
解决方案
1、为父元素设置padding

#father {
    width: 200px;
    height: 200px;
    padding: 1px;
}
#son {
    width: 100px;
    height: 100px;
    margin: 10px;
}

2、为父元素设置border

	#father {
	    width: 200px;
	    height: 200px;
	    border: 1px solid #000;
	}
	#son {
	    width: 100px;
	    height: 100px;
	    margin: 10px;
	}

3、为父元素设置 overflow: hidden 

#father {
    width: 200px;
    height: 200px;
    overflow: hidden;
}
#son {
    width: 100px;
    height: 100px;
    margin: 10px;
}

4、父级或子元素使用浮动或者绝对定位absolute

#father {
    width: 200px;
    height: 200px;
    position:absolute;
}
#son {
    width: 100px;
    height: 100px;
    margin: 10px;
}