css父元素與子項目之間的margin-top問題

父元素的盒子包含一個子項目盒子，給子項目盒子一個垂直外邊距margin-top,父元素盒子也會往下走margin-top的值，而子項目和父元素的邊距則沒有發生變化。
 
html代碼：

<div class="box1">
<div class="box2"></div>
</div>

css樣式：

.box1{height:200px;width:200px;background:gray;}
.box2{height:100px;width:100px;background:gold;margin-top:50px;}

解決方案：

1、修改父元素的高度，增加padding-top樣式類比（padding-top：1px；常用）
2、為父元素添加overflow：hidden；樣式即可（完美）
3、為父元素或者子項目聲明浮動（float：left；可用）
4、為父元素添加border（border:1px solid transparent可用）
5、為父元素或者子項目聲明絕對位置

在某些瀏覽器中，當給層內元素設定margin-top時，層內元素並沒有margin，而是父層出現了margin-top，這往往讓人很費解吧。。

解決辦法有：

1.給父層添加：overflow:hidden;
2.給父層添加：border除none以外的屬性
3.給父層添加：padding-top代替margin-top的效果。