css 關於外邊距合併的問題

也是在做項目的時候遇到的問題，解決之後記錄下,問題如下：
子元素爲父元素的直接子元素時，子元素的margin-top會作用的父元素上

    <div style="width:500px; height:300px; background-color: red;">
        <div style="width:250px; height:150px; background-color: blue; margin-top:150px"></div>
    </div>

解決辦法:

1.父元素設置爲absolute…..這就將父元素脫離文檔流了,子元素的margin自然不會影響

2.父元素下面加一個空的table標籤,或者是display:table的標籤

3.將子元素的margin轉換爲父元素的padding

4.爲父元素加上邊框

不積跬步無以至千里