CSS学习笔记（5）--导航ul，li浮动问题

为什么只给li设置浮动，没有给ul设置浮动，ul后的元素div也会跟着浮动？

 

添加评论

分享

 

默认排序按时间排序

3 个回答

 

张思远 程序员

2 人赞同

代码是不是这样的啊?
<ul>
<li style="float:left">test float</li>
</ul>
<div>after div</div>
如果是的话, 出来的效果是li跟div在一排了
因为没有clear, 这样就会好:
<ul>
<li style="float:left">test float</li>
</ul>
<div style="clear:both"></div>
<div>after div</div>
建议的做法是这样, 代码会好看一些, 而且兼容各种浏览器哦
<style>
.clearfix:before, .clearfix:after { content:""; display:table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
</style>
<ul class="clearfix">
<li style="float:left">test float</li>
</ul>
<div>after div</div>

如果你问的为什么要clear的话, 请看这里: http://w3school.com.cn/css/css_positioning_floating.asp

编辑于 2012-10-24 添加评论 感谢

分享

收藏 • 没有帮助 • 举报 • 作者保留权利

0赞同反对，不会显示你的姓名

苏亮 鸡蛋糕跟你嘴角果酱我都想要尝

 

是因为你的li浮动了，不占整个文档的位置，包裹li的ul就默认里面是不占位的。所以在整个文档流里面就没有ul了，这样的话，后来的div就会造成一种浮动的假象，因为他以为前面没有东西了，实际上是ul不占位了。解决的方法就是清除掉li的浮动，方法就是楼上的楼上给的，而且第二种是最好用的，没有什么废标签。

发布于 2012-10-25 添加评论 感谢

分享

收藏 • 没有帮助 • 举报 • 作者保留权利

0赞同反对，不会显示你的姓名

Chang1ng Me.

 

比如做一个导航，最常用的就是无序列表来做，给每个li左浮动就排成一列啊，很简单的道理。ul是嵌套在div里面的，不用浮动，除非你的div里面有多个快而且导航要在最上面的话，ul需要浮动。这些都是很基础的东西。

发布于 2012-10-24 添加评论 感谢

分享

收藏 • 没有帮助 • 举报 • 作者保留权利

我来回答这个问题