先上代碼:前端
<div id="content" style=" width:750px; height:300px; background:#C29A29; margin-top:100px; margin-left:150px;"> <ul class="clearfloat" style="border-top:#630 solid 2px; border-bottom:#630 solid 2px; padding:2px 0 2px 0; margin-top:10px;"> <li class="contentNav" ><a href="">我是張三</a></li> <li class="contentNav" ><a href="">我是李四</a></li> <li class="contentNav" ><a href="">那我只能是王五了</a></li> </ul> </div>
要實現的效果是一個大概居中的div裏面一排導航,給ul的margin-top不論怎麼設置都是無效,百度之:web
兩個或多個毗鄰的普通流中的塊元素垂直方向上的 margin 會摺疊
1.兩個或多個
說明其數量必須是大於一個,又說明,摺疊是元素與元素間相互的行爲,不存在 A 和 B 摺疊,B 沒有和 A 摺疊的現象。
2.毗鄰
是指沒有被非空內容、padding、border 或 clear 分隔開,說明其位置關係。
注意一點,在沒有被分隔開的狀況下,一個元素的 margin-top 會和它普通流中的第一個子元素(非浮動元素等)的 margin-top 相鄰; 只有在一個元素的 height 是 "auto" 的狀況 下,它的 margin-bottom 纔會和它普通流中的最後一個子元素(非浮動元素等)的 margin-bottom 相鄰。
3.垂直方向
是指具體的方位,只有垂直方向的 margin 纔會摺疊,也就是說,水平方向的 margin 不會發生摺疊的現象。spa
這裏感謝前端攻城獅丁小倪在那啥上的回答,不過本人不認識他,估計也@不到,就算了。code
解決方法:orm
茴香豆有幾種寫法忘了,這個聽說有四種方法,曉得一種就行,其餘的可能會坑。 blog
給父級元素加:overflow:hiddenci