margin-top使用需要注意的地方

偶然的機會發現一個有趣的現象：一個div（背景色為綠色）里面包含一個div，里面的div給一個margin-top：100px;

代碼：

<div style="background: green">
　　<div style="background: blanchedalmond;margin-top:100px; height:300px"></div>
</div>

我想的是會撐高父級div的高度，露出綠色的背景色，但是實際顯示效果卻是它連同父級一起下移了；預想的效果和實際效果：

預想的效果：

但是實際的效果（灰色為body的背景色）：

當給父級div中加上內容之后效果顯示正常了，代碼：

<div style="background: green;">
　　test
　　<div style="background: blanchedalmond;margin-top:100px; height:300px"></div>
</div>

效果：

最后想出一個解決的方法：給父級加上一個overflow:hidden;

但是遺留了一個問題，“這到底是為什么呢，這樣不是違背了盒模型設計嗎~~”