div嵌套後margin出現失效（轉移）的問題

聲明：本文是轉載文章，原文在這裏：div嵌套引起的margin-top不起作用。

在一次寫頁面時，發現div嵌套後margin居然失效了，直接作用到了外層div上，調了好了一陣子發現css應該沒有寫錯。於是想，會不會有什麼潛在的我不知道的因素，一搜果然發現有許多人遇到了類似的問題，轉載於此。

現象：在一些瀏覽器中，有兩個嵌套關係的div，如果外層div的父元素padding值爲0，那麼內層div的margin-top或者margin-bottom的值會“轉移”給外層div。

原因：盒子沒有獲得 haslayout 造成 margin-top 無效。

解決的幾種辦法，請根據實際情況選用：

1. 在父層div加上：overflow:hidden；

2. 把margin-top外邊距改成padding-top內邊距；

3. 父元素產生邊距重疊的邊，有不爲 0 的 padding 或 寬度不爲 0 且 style 不爲 none 的 border；父層div加：padding-top: 1px;

4. 讓父元素生成一個 block formating context（實現方法見下表）；父層div加：

float: left/right
position: absolute
display: inline-block/table-cell (或其他 table 類型)
overflow: hidden/auto