解决盒子嵌套中，内盒margin-top失效

参考资料
https://www.w3school.com.cn/css/css_margin_collapsing.asp
https://segmentfault.com/a/1190000019250914


内盒的margin-top设为30px；margin-left设为30px；
效果是：内盒的margin-left有效，但内盒的margin-top使外盒向下移动了30px；
这时，内盒设置了margin-top属性，内盒和外盒的顶部并不会有间距，而是外盒被顶下来，好像给外盒设置了margin-top属性一样。
原因：
1.margin-left：
外盒没有向右移动是受文本流的影响
2.margin-top：
外盒受影响向下移动，是因为外盒没有内边距、边框与内盒分隔，内外盒子的外边距重叠。内盒设置margin-top属性，使内盒溢出显示到了外盒的外面去了。
解决:
1.外盒设置边框border
2.外盒使用内边距padding
3.设置浮动
4.外盒设置 overflow:hidden 溢出隐藏（推荐）
限制内盒的显示范围，将margin-top值的起始位置算到了外盒里面