關於css中父元素與子元素之間margin-top的問題

之前在使用經常遇到下面的問題：

html：

<div class="top">
    <div class="one">I'm the first!</div>
    <div class="two">I'm the second!</div>
</div>

css：

        .one{
            width: 100px;
            height: 100px;
            background: red;
            margin-top:20px;
        }
    .two{
            width:100px;
            height:100px;
            background:blue;
        }
    .top{
            width:200px;
            height:300px;
            background:gray;
        }    

顯示結果：

.one與.top之間並沒有實現margin-top的效果，這個問題發生的原因是根據規范，一個盒子如果沒有上補白(padding-top)和上邊框(border-top)，那么這個盒子的上邊距會和其內部文檔流中的第一個子元素的上邊距重疊。兩個相鄰的margin之間如果沒有明確的界限（padding、border），則會發生重疊，重疊后相應的margin為較大的那個，上圖中第二個div的margin-top與第一個div的margin-bottom之間沒有界限，所以one的margin-bottom與two的margin-top重疊了，它們之間只有一個margin的距離，而父標簽top的margin-top與one的margin-top之間也沒有界限，所以兩者也會重合，因為top的margin-top為0小於one的margin-top值，所以重疊后的值為后者。

解決方法：

1、修改父元素的高度，增加padding-top樣式模擬（padding-top：1px；添加界限） 
2、為父元素添加overflow：hidden；樣式即可（讓父元素成為BFC，內部布局不受外部影響） 
3、為父元素或者子元素聲明浮動（浮動元素的margin垂直方向不疊加） 
4、為父元素添加border（添加界限） 
5、為父元素或者子元素聲明絕對定位（BFC）