如果没有浮动,则重叠,示例:
<style type="text/css"> ul { margin:0; padding:0; width:100px; overflow:hidden; } ul li { margin:20px 0; padding:0; width:100px; height:20px; background:#f00; list-style:none; } </style> <ul> <li></li> <li></li> <li></li> <li></li> </ul>
效果:
如上,可以看出,虽然 li 上下 margin 是 20px,但是间隔并不是 20px + 20px,而就只有 20px,说明它们重叠了。
现在给 li 加上 float:left;,效果如下:
如上间隔是 20px + 20px。