CSS教程:浮动元素对浏览器的支持

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

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

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

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

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

运行代码框
p为了兼容不同浏览器，可能要使用不同的清除浮动元素组合使用，如：{overflow:hidden; zoom:1;}、{display:table; width:100%;}、{overflow:hidden; height:1%;}/pp以下分析了部份的消除浮动元素对浏览器的支持：/ppspan id="more-24"/spana target="_blank" href="/flow.html"测试的实例/a/pstyle type="text/css".m20080111{margin:auto; background:#000;font:12px/160% arial; } .m20080111 td{background:#fff;padding:3px;} .m20080111 th{background:#fff;color:#f00;padding:2px;} .m20080111 strong{font-weight:normal;color:#f00;} .m20080111 .y{background:#080;color:#fff;} .m20080111 .n{background:#900;color:#fff;}/styletable border="0" width="98%" cellPadding="0" cellSpacing="1" class="m20080111"trtd colSpan="2"更新日期:2008/01/16/tdtd colSpan="7" align="center"Windows/td/trtrth width="2%" align="right"/thth width="42%" align="right"/thth width="8%" align="center"IE7/thth width="8%" align="center"IE6/thth width="8%" align="center"IE5.5/thth width="8%" align="center"FF/thth width="8%" align="center"Ns/thth width="8%" align="center"Op/thth width="8%" align="center"Sf/th/trtrtd align="center"1/tdtd align="right"float:left / right;/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="y"Y/td/trtrtd align="center"2/tdtd align="right"<div style=clear:both;></div>/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="y"Y/td/trtrtd align="center"3/tdtd height="23" align="right"height:(等于内容高度);/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="y"Y/td/trtrtd align="center"4/tdtd align="right":after/tdtd align="center" vAlign="middle" class="n"N/tdtd align="center" vAlign="middle" class="n"N/tdtd align="center" vAlign="middle" class="n"N/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="y"Y/td/trtrtd align="center"5/tdtd align="right"overflow:hidden / auto;/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="n"N/tdtd align="center" vAlign="middle" class="n"N/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="y"Y/td/trtrtd align="center"6/tdtd align="right"width:100%;/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="n"N/tdtd align="center" vAlign="middle" class="n"N/tdtd align="center" vAlign="middle" class="n"N/tdtd align="center" vAlign="middle" class="n"N/td/trtrtd align="center"7/tdtd align="right"height:1%;/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="n"N/tdtd align="center" vAlign="middle" class="n"N/tdtd align="center" vAlign="middle" class="n"N/tdtd align="center" vAlign="middle" class="n"N/td/trtrtd align="center"8/tdtd align="right"zoom:1;/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="n"N/tdtd align="center" vAlign="middle" class="n"N/tdtd align="center" vAlign="middle" class="n"N/tdtd align="center" vAlign="middle" class="n"N/td/trtrtd align="center"9/tdtd align="right"max-height:(等于或大于内容);/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="n"N/tdtd align="center" vAlign="middle" class="n"N/tdtd align="center" vAlign="middle" class="n"N/tdtd align="center" vAlign="middle" class="n"N/tdtd align="center" vAlign="middle" class="n"N/tdtd align="center" vAlign="middle" class="n"N/td/trtrtd align="center"10/tdtd align="right"min-height:(等于或小于内容);/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="n"N/tdtd align="center" vAlign="middle" class="n"N/tdtd align="center" vAlign="middle" class="n"N/tdtd align="center" vAlign="middle" class="n"N/tdtd align="center" vAlign="middle" class="n"N/tdtd align="center" vAlign="middle" class="n"N/td/trtrtd align="center"11/tdtd align="right"display:inline-block;/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="n"N/tdtd align="center" vAlign="middle" class="n"N/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="y"Y/td/trtrtd align="center"12/tdtd align="right"display:table;/tdtd align="center" vAlign="middle" class="n"N/tdtd align="center" vAlign="middle" class="n"N/tdtd align="center" vAlign="middle" class="n"N/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="y"Y/td/trtrtd align="center"13/tdtd height="23" align="right"height:(小于内容高度);/tdtd align="center" vAlign="middle" class="n"N/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="y"Y/tdtd align="center" vAlign="middle" class="n"N/tdtd align="center" vAlign="middle" class="n"N/tdtd align="center" vAlign="middle" class="n"N/tdtd align="center" vAlign="middle" class="n"N/td/tr/table
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

注意：以上表格元素是指，当内容被移出文档流时清除元素对浏览器分支持

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