今天做一個網站時，首頁即將收尾，做到了導航菜單模塊，但是在實現子元素UL距離父元素div#links時，遇到了 margin-top設置無效的現象。

html代碼：

<div id="links">
<ul>
<li><a href=http://www.90focus.com>90focus前端技術學習</a></li>
<li><a href=http://www.90focus.com>90focus前端技術學習</a></li>
...

<div class="clear"></div>
</ul>
</div> 

CSS代碼：

#links{height:105px; background:url(../images/linkbg.gif) no-repeat; margin-top:10px;}
#links ul{ display:block; width:905px; margin-left:40px; margin-top:10px;}
#links ul li{ display:inline-block; width:100px; text-align:center; line-height:30px; float:left}

但是發現無論怎樣修改ul的margin數制都沒有作用，在網上查了一下原因，有人說是“margin疊加bug”。有幾個解決方法：

1.在父元素加上有意義的border數值（0，none無效）

2.在父級內部的添加上、下兩個空元素

3.在父級元素加： float:left; (clear:both;)

4.在父級元素加：overflow:hidden;

我個人覺得還是第四種比較好，1、2種方法有點不倫不類的，第三種浮動吧，做不好還有“后遺癥”，所以加上overflow:hidden;比較保險。