柠檬铺

当元素设置浮动(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%;}</p></p> <p><p>以下分析了部份的消除浮动元素对浏览器的支持：</p></p> <p><p><span id="more-24"></span><a target="_blank" href="/flow.html">测试的实例</a></p></p> <p><style 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;}</style></p> <p><table border="0" width="98%" cellPadding="0" cellSpacing="1" class="m20080111"></p> <p><tr></p> <p><td colSpan="2">更新日期:2008/01/16</td></p> <p><td colSpan="7" align="center">Windows</td></p> <p></tr></p> <p><tr></p> <p><th width="2%" align="right"></th></p> <p><th width="42%" align="right"></th></p> <p><th width="8%" align="center">IE7</th></p> <p><th width="8%" align="center">IE6</th></p> <p><th width="8%" align="center">IE5.5</th></p> <p><th width="8%" align="center">FF</th></p> <p><th width="8%" align="center">Ns</th></p> <p><th width="8%" align="center">Op</th></p> <p><th width="8%" align="center">Sf</th></p> <p></tr></p> <p><tr></p> <p><td align="center">1</td></p> <p><td align="right">float:left / right;</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p></tr></p> <p><tr></p> <p><td align="center">2</td></p> <p><td align="right">&lt;div style=”clear:both;”&gt;&lt;/div&gt;</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p></tr></p> <p><tr></p> <p><td align="center">3</td></p> <p><td height="23" align="right">height:(等于内容高度);</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p></tr></p> <p><tr></p> <p><td align="center">4</td></p> <p><td align="right">:after</td></p> <p><td align="center" vAlign="middle" class="n">N</td></p> <p><td align="center" vAlign="middle" class="n">N</td></p> <p><td align="center" vAlign="middle" class="n">N</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p></tr></p> <p><tr></p> <p><td align="center">5</td></p> <p><td align="right">overflow:hidden / auto;</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="n">N</td></p> <p><td align="center" vAlign="middle" class="n">N</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p></tr></p> <p><tr></p> <p><td align="center">6</td></p> <p><td align="right">width:100%;</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="n">N</td></p> <p><td align="center" vAlign="middle" class="n">N</td></p> <p><td align="center" vAlign="middle" class="n">N</td></p> <p><td align="center" vAlign="middle" class="n">N</td></p> <p></tr></p> <p><tr></p> <p><td align="center">7</td></p> <p><td align="right">height:1%;</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="n">N</td></p> <p><td align="center" vAlign="middle" class="n">N</td></p> <p><td align="center" vAlign="middle" class="n">N</td></p> <p><td align="center" vAlign="middle" class="n">N</td></p> <p></tr></p> <p><tr></p> <p><td align="center">8</td></p> <p><td align="right">zoom:1;</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="n">N</td></p> <p><td align="center" vAlign="middle" class="n">N</td></p> <p><td align="center" vAlign="middle" class="n">N</td></p> <p><td align="center" vAlign="middle" class="n">N</td></p> <p></tr></p> <p><tr></p> <p><td align="center">9</td></p> <p><td align="right">max-height:(等于或大于内容);</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="n">N</td></p> <p><td align="center" vAlign="middle" class="n">N</td></p> <p><td align="center" vAlign="middle" class="n">N</td></p> <p><td align="center" vAlign="middle" class="n">N</td></p> <p><td align="center" vAlign="middle" class="n">N</td></p> <p><td align="center" vAlign="middle" class="n">N</td></p> <p></tr></p> <p><tr></p> <p><td align="center">10</td></p> <p><td align="right">min-height:(等于或小于内容);</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="n">N</td></p> <p><td align="center" vAlign="middle" class="n">N</td></p> <p><td align="center" vAlign="middle" class="n">N</td></p> <p><td align="center" vAlign="middle" class="n">N</td></p> <p><td align="center" vAlign="middle" class="n">N</td></p> <p><td align="center" vAlign="middle" class="n">N</td></p> <p></tr></p> <p><tr></p> <p><td align="center">11</td></p> <p><td align="right">display:inline-block;</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="n">N</td></p> <p><td align="center" vAlign="middle" class="n">N</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p></tr></p> <p><tr></p> <p><td align="center">12</td></p> <p><td align="right">display:table;</td></p> <p><td align="center" vAlign="middle" class="n">N</td></p> <p><td align="center" vAlign="middle" class="n">N</td></p> <p><td align="center" vAlign="middle" class="n">N</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p></tr></p> <p><tr></p> <p><td align="center">13</td></p> <p><td height="23" align="right">height:(小于内容高度);</td></p> <p><td align="center" vAlign="middle" class="n">N</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="y">Y</td></p> <p><td align="center" vAlign="middle" class="n">N</td></p> <p><td align="center" vAlign="middle" class="n">N</td></p> <p><td align="center" vAlign="middle" class="n">N</td></p> <p><td align="center" vAlign="middle" class="n">N</td></p> <p></tr></p> <p></table>
[Ctrl A 全部选择 提示：你可先修改部分代码，再按运行]

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

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