有些情況下，我們設定父元素下的子元素margin值時，父元素會被影響。
這是個常見問題，而且只在標准瀏覽器下 (FirfFox、Chrome、Opera、Sarfi)產生問題，IE下反而表現良好。
例如：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css">
body,html{
background:green;
}
7 #box{ 8 width: 400px; 9 height: 400px; 10 background: red; 11 } 12 #main{ 13 width: 100px; 14 height: 100px; 15 background: yellow; 16 margin: 50px; 17 } 18 </style> 19 </head> 20 <body> 21 <div id="box"> 22 <div id="main"> 23 24 </div> 25 </div> 26 </body> 27 </html>
為了清楚，我這里將body背景色改為綠色，我們會發現，父元素被改變了，雖然並沒有在數值上做出改變，但是樣式確實是發生了變化，那么我們進行如下操作進行消除子元素對於父元素的影響。
對父元素增加CSS代碼：
overflow:hidden;
怎么會出現這個問題呢？我也是在網上看了好多，挑選了一個我覺得說的而比較靠譜的原因。
“這個問題發生的原因是根據規范，一個盒子如果沒有上補白(padding-top)和上邊框(border-top)，那么這個盒子的上邊距會和其內部文檔流中的第一個子元素的上邊距重疊。”
說的白話一點就是，如果你什么都沒有進行操作的話，子元素文本節點會對上級“找麻煩”；所以，對父元素增加代碼overflow：hidden。
文章部分來自http://blog.csdn.net/u012011360/article/details/41823125