在开发中经常会遇到当父级元素设置了margin-top,子级元素再设置margin-top时，
如果子元素的值小于父元素的值，则子元素设置的margin-top没有效果；如果子元素的值大于父元素的值，则父子元素一起向下移动；那下面就来解决这个问题：
<!-- 1.absolute：绝对定位；
脱离原来的位置进行定位，
相对于最近的有定位属性的父级元素进行定位，如果没有就相对于文档进行定位 -->
<!-- 2.relative：相对定位；
保留原来位置进行定位，
相对于出生(原始)的位置进行定位 -->
<!-- 3.fixed：固定定位;
相对于屏幕固定在某个位置，当屏幕滚动时该视图跟随不动 -->
<!-- 解决margin塌陷的问题
一：问题描述：当父级元素设置了margin-top,子级元素再设置margin-top时，
如果子元素的值小于父元素的值，则子元素设置的margin-top没有效果；
如果子元素的值大于父元素的值，则父子元素一起向下移动； -->
<!-- 解决方法：BFC： block format content -->
<!-- 如何触发一个盒子的bfc：
1.position:basolute;
2.display: inline-block;
3.float: left/right;
4.overflow: hidden;
4个方法都可以，具体使用哪一个，看具体情况 -->
<div class="father">
<div class="son"></div>
</div>
.father{
margin-left: 100px;
margin-top: 100px;
width: 100px;
height: 100px;
background-color: aqua;
overflow: hidden;
/* display: inline-block; */
/* float: left; */
/* position: absolute; */
}
.son{
margin-left: 50px;
margin-top: 50px;
width: 50px;
height: 50px;
background-color: red;
}
