在web網站開發中，有時候我們給html元素設定的margin-top或margin-bottom屬性，但是無效，並沒有取到任何作用,這是什麼原因呢?常出現兩種情況:

一、兄弟元素之間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之間增加一層"<divstyle="clear:both;"></div>"

二、子元素設定margin-top作用於父容器

<div class="box" style="height:100px;background:red;"> 
  <div class="box2" style="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

https://www.houdianzi.com/foshanlogo/ 佛山logo設計

總彙

現象：
當兩個空的塊級元素巢狀時，如果內部的塊設定有margin-top屬性，而且父元素沒有下邊解決方法所述的特徵，那麼內部塊的margin-top屬性會綁架父元素（即將margin-top傳遞凌駕給了父元素）。
就好比一個小兵，看到上級有漏洞，就假傳聖旨，利用漏洞擴張自己的權利。只要設定父元素的border（柵欄）或者padding（隔離牆），就能管住這個調皮的下屬。

解決方法：

1、設定父元素或者自身的display:inline-block;
2、設定父元素的border:1px aqua solid;(>0)
3、設定父元素的padding:1px;(>0)
4、給父元素設定overflow:hidden;
5、給父元素或者自身設定position:absolute;
6、設定父元素非空，填充一定的內容。

這個現象並不是bug，而是有理論依據的：

《on having layout》
hasLayout 會影響一個盒子和其子孫的邊距重疊。根據規範，一個盒子如果沒有上補白和上邊框，那麼它的上邊距應該和其文件流中的第一個孩子元素的上邊距重疊。

但值得一提的是，只有在FF和Chrome下才會出現這種margin-top綁架父節點的情況，在IE6 IE7中均顯示正常，但這恰恰說明了他們是不符合規範的，而FF合Chrome則是嚴格遵守規範的。