浮动元素对浏览器的支持

tianyazjq110

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

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

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

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

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

测试的实例：http://blog.gulu77.com/demo/200801/flow.html
为了兼容不同浏览器，可能要使用不同的清除浮动元素组合使用，如：{overflow:hidden; zoom:1;}、{display:table; width:100%;}、{overflow:hidden; height:1%;}

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

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

更新日期:2008/01/16 Windows
  IE7 IE6 IE5.5 FF Ns Op Sf
1 float:left / right; Y Y Y Y Y Y Y
2 <div style=”clear:both;”></div> Y Y Y Y Y Y Y
3 height:(等于内容高度); Y Y Y Y Y Y Y
4 :after N N N Y Y Y Y
5 overflow:hidden / auto; Y N N Y Y Y Y
6 width:100%; Y Y Y N N N N
7 height:1%; Y Y Y N N N N
8 zoom:1; Y Y Y N N N N
9 max-height:(等于或大于内容); Y N N N N N N
10 min-height:(等于或小于内容); Y N N N N N N
11 display:inline-block; Y Y Y N N Y Y
12 display:table; N N N Y Y Y Y
13 height:(小于内容高度); N Y Y N N N N
[img][/img]
http://bbs.blueidea.com/viewthread.php?tid=2828322&extra=page%3D3%26amp%3Bfilter%3Drate