在開發(fā)中經(jīng)常會遇到當父級元素設置了margin-top,子級元素再設置margin-top時，
如果子元素的值小于父元素的值，則子元素設置的margin-top沒有效果；如果子元素的值大于父元素的值，則父子元素一起向下移動；那下面就來解決這個問題：

 <!-- 1.absolute：絕對定位；
脫離原來的位置進行定位，
相對于最近的有定位屬性的父級元素進行定位，如果沒有就相對于文檔進行定位 -->

<!-- 2.relative：相對定位；
保留原來位置進行定位，
相對于出生(原始)的位置進行定位 -->

<!-- 3.fixed：固定定位;
相對于屏幕固定在某個位置，當屏幕滾動時該視圖跟隨不動 -->

<!-- 解決margin塌陷的問題
一：問題描述：當父級元素設置了margin-top,子級元素再設置margin-top時，
如果子元素的值小于父元素的值，則子元素設置的margin-top沒有效果；
如果子元素的值大于父元素的值，則父子元素一起向下移動； -->
<!-- 解決方法：BFC： block format content -->
<!-- 如何觸發(fā)一個盒子的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;
}