當元素設置浮動(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> </SPAN> </div> </div> <div id="iwvjtn8m0" class=page1> <p align="center" class="pageLink"></p> </div> <div id="iwvjtn8m0" class="fenxiang"> <!--分享 --> <div style="text-align:left">上一篇：<a href='/wen/2024/07-11/1342937.html'>DOCTYPE和XHTML的相關認識</a></div> <br> <div style="text-align:left">下一篇：<a href='/wen/2024/07-11/1342939.html'>CSS設計符合Web標準的網頁表單的幾個技巧</a></div> <br> <script src=/d/js/acmsd/gao21.js></script> <!--分享 --> </div> <div id="iwvjtn8m0" class="pinglun"> <!-- 評論 --> <script> function CheckPl(obj) { if(obj.saytext.value=="") { alert("您沒什么話要說嗎？"); obj.saytext.focus(); return false; } return true; } </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)"> <table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost"> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="title"> <tr> <td><strong>發表評論</strong></td> <td align="right"><a href="/e/pl/?classid=215&id=1342938">共有<span><script type="text/javascript" src="/e/public/ViewClick/?classid=215&id=1342938&down=2"></script></span>條評論</a></td> </tr> </table> <table width="100%" border="0" cellspacing="10" cellpadding="0"> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="2"> <tr> <td width="56%" align="left">用戶名: <input name="username" type="text" class="inputText" id="username" value="" size="16" /></td> <td width="44%" align="left">密碼: <input name="password" type="password" class="inputText" id="password" value="" size="16" /></td> </tr> <tr> <td align="left">驗證碼: <input name="key" type="text" class="inputText" size="10" /> <img src="/e/ShowKey/?v=pl" align="absmiddle" /> </td> <td align="left"><input name="nomember" type="checkbox" id="nomember" value="1" checked="checked" /> 匿名發表</td> </tr> </table> <textarea name="saytext" cols="70" rows="6" id="saytext">