文章出處：
css屬性有很多值得學習的地方，你對css中margin-top屬性失效的解決方法是否熟悉，這裡和大家分享一下，相信通過本文的介紹你對margin-top屬性失效的解決方法一定會有深刻的認識。
關於margin-top屬性失效的解決方法
常出現兩種情況：
（一）margin-top失效
先看下面**：
float:leftdiv>
clear:both;margin-top:20px;div>
div>
兩個層box1和box2，box1具有浮動屬性，box2沒有，這時候設定box2的上邊距margin-top沒有效果。
網上能找到的兩種比較靠譜的解釋：
1：「在css2.1中，水平的margin不會被摺疊；垂直margin可能在一些盒模型中被摺疊…」
2：當第乙個層浮動，而第二個沒浮動層的margin會被壓縮，詳見--浮動元素後非浮動元素的margin的處理。
得到解決問題思路：要浮動一起浮動，要就一起不浮動。
解決辦法：
1.box2增加float屬性
2.box1與box2之間增加一層"
"（二）子元素設定margin-top作用于父容器
clear:both;
margin-top:20px;height:50px;width:500px;
background:#000;div>
div>
當給box2設定margin-top時，在ff下僅作用于父容器。
解決辦法：
1.給父容器box加overflow:hidden;屬性
2.父容器box加border除none以外的屬性
3.用父容器box的padding-top代替margin-top
margin top重疊問題
html 複製 如下 css樣式 複製 如下 box1 box2 解決方法 1 修改父元素的高度，增加padding top樣式模擬 padding top 1px 常用 2 為父元素新增overflow hidden 樣式即可 完美 3 為父元素或者子元素宣告浮動 float left 可用 4 ...
margin top重疊問題
父子div的margin top重疊問題，看如下示例 div1 div2 在以上情況瀏覽器上出現的結果是，會使得父元素距上方有50畫素的現象 解決方法是 修改父元素的高度，增加padding top樣式模擬 padding top 1px，常用 為父元素新增overflow hidden 樣式即可 ...
margin top 失效的問題
其實關於這個問題，老生常談了。在這裡說說因僅僅是因為想更加深刻的理解一下。lang en charset utf 8 documenttitle head box d1.d2 style class box class d1 class d2 div div div body html 為了看到效果...