標籤：str 而不是 就會 邊框 錯誤 添加 避免 ack overflow
問題描述：
一個父包含框包含一個子項目。給正常流的子項目一個垂直外邊距margin-top就會使得父元素跟著往下走，而子項目和父元素的邊距則沒有發生變化。
html結構：
<div class="box1"><div class="box1_1"></div></div>
css樣式：
.box1{height:400px;background:#fad;}
.box1_1{height:100px;margin-top:50px;background:#ade;}
解決辦法：
1.修改父元素的高度，增添padding-top樣式類比（常用）；
2.為父元素添加overflow:hidden;樣式即可（完美）；
5.為父元素或者子項目聲明浮動（可用）；
3.為父元素添加border（可用）;
4.添加額外的元素放在子項目最前面，設定高度為1px，overflow:hidden(若為行內元素，需要聲明為塊元素)（囉嗦）;
6.為父元素或者子項目聲明絕對位置（……）。
原理一個盒子如果沒有上補白(padding-top)和上邊框(border-top)，那麼這個盒子的上邊距會和其內部文檔流中的第一個子項目的上邊距重疊。 這就是原因了。“嵌套”的盒元素也算“毗鄰”，也會 Collapsing Margins。這個合并Margin其實很常見，就是文章段落元素<p/>，並列很多個的時候，每一個都有上下1em的margin，但相鄰的<p/>之間只會顯示1em的間隔而不是相加的2em。這個很好理解，我就是奇怪為什麼W3C要讓嵌套的元素也共用Margin，想不出來在什麼情況下需要這樣的表現。 這個問題的避免方法很多，只要破壞它出現的條件就行。給
Outer Div 加上 padding/border，或者給
Outer Div / Inner Div 設定為 float/position:absolute(CSS2.1規定浮動元素和絕對位置元素不參與Margin摺疊)。 在 IE/Win 中如果這個盒子有 layout 那麼這種現象就不會發生了：似乎擁有 layout 會阻止其孩子的邊距伸出包含容器之外。此外當 hasLayout = true 時，不論包含容器還是孩子項目，都會有邊距計算錯誤的問題出現。 hasLayout 詳情點擊>>
轉載自：網路
子項目margin-top屬性傳遞給父元素的問題 轉！
