打印

[讨论] 浮动元素对浏览器的支持

当元素设置浮动(float)后会被移出文档流,相信大家都会经常遇到这样的问题。

这问题的解决办法有N种之多,因为每种浏览器对CSS的解析各异,所以在不同浏览器使用清除浮动的元素也会有所不同。

我认为目前还没有最好的清除浮动元素或组合,而是根据情况分析而选择,最好的清除浮动元素或组合。

为了兼容不同浏览器,可能要使用不同的清除浮动元素组合使用,如:{overflow:hidden; zoom:1;}、{display:table; width:100%;}、{overflow:hidden; height:1%;}

以下分析了部份的消除浮动元素对浏览器的支持:

测试的实例:http://blog.gulu77.com/demo/200801/flow.html

 提示:您可以先修改部分代码再运行
注意:以上表格元素是指,当内容被移出文档流时清除元素对浏览器分支持

你是否也使用了以上表格元素或组合,如有更佳的消除浮动元素或方法,欢迎赐教!

讨论:http://blog.gulu77.com/?p=24

[ 本帖最后由 gulu77 于 2008-1-31 12:42 编辑 ]
本帖最近评分记录
  • phantom 威望 +2 不错的总结,大家一起学习 2008-1-31 16:09
总结得好,谢谢楼主

楼主的说明图表有误吧?

我一直喜欢使用第五种方法,因为它不用添加多余的HTML标签,但你图表中说这个HACK针对IE6和IE5.5无效,我试了一下,也有效啊,而且是通杀所有浏览器
overflow:hidden

测试了以下浏览器:ie5.0.1,ie5.5,ie6.0,ie7.0,ff2.0,opera9.1

 提示:您可以先修改部分代码再运行
overflow:hidden 能支持IE6和IE5.5消除浮动这不可能...

你例子中的内容还没有设置浮动,内容还没移出文档流,所以你误以为已经消除了浮动!

在.content 加上float:left; 看看效果..

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!
嗯,是我看错了.刚才我加上后测试了一下,overflow:hidden 是不能够在以上两种浏览器消除浮动.看来只有float:left/right这种方法最好了,能通杀所有浏览器.
但是在实际应用中,可能又不想让容器浮动,因此可能还要在外面添加一个容器才行,这应该也是它的一个弱势吧!

TOP

overflow:hidden最好少用好象
我是菜鸟说错了大家别蹂我。。。
AOAO好象说过overflow:hidden会然鼠标中键失效。。。
所以就算对IE5 IE6支持,也最好表用

~_~

TOP

overyflow很好用,最喜欢用了。尤其是在做门户网站的时候,不知道哪些小子会加多少内容,放多大的图片了。呵呵
体验游戏 game4power

TOP