常出現兩種情況：
（一）margin-top失效
先看下面代碼：
<div>
<div class="box1" >float:left</div>
<div class="box2">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之間增加一層"<div style="clear:both;"></div>"
（二）子元素設定margin-top作用于父容器
<div class="box" style="height:100px;background:red;">
<div class="box2">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
老項目的漂浮父元素,裡的個别元素缺少float屬性,加入後解決.要就都有,要就都沒有,但是在某種情況下IE 是認得
轉載于:https://www.cnblogs.com/mikueye/p/4006278.html