今天做一個(gè)網(wǎng)站時(shí)，首頁即將收尾，做到了導(dǎo)航菜單模塊，但是在實(shí)現(xiàn)子元素UL距離父元素div#links時(shí)，遇到了 margin-top設(shè)置無效的現(xiàn)象。

html代碼：

<div id="links">
<ul>
<li><a href=http://www.90focus.com>90focus前端技術(shù)學(xué)習(xí)</a></li>
<li><a href=http://www.90focus.com>90focus前端技術(shù)學(xué)習(xí)</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}

但是發(fā)現(xiàn)無論怎樣修改ul的margin數(shù)制都沒有作用，在網(wǎng)上查了一下原因，有人說是“margin疊加bug”。有幾個(gè)解決方法：

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

2.在父級內(nèi)部的添加上、下兩個(gè)空元素

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

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

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