CSS綁架父標籤

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

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

<div id="parrent"> <div id="box1"></div></div>

#parrent{ width:500px; height:300px; background:teal;}

#box1{ width:100px; height:100px; background:aqua; margin:20px;}

解決方法：
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則是嚴格遵守規範的。