CSS教程:浮動元素對瀏覽器的支持

2024-07-11 08:43:44

字體：大中小

來源：轉載

供稿：網友

當元素設置浮動(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><span id="more-24"></span><a target="_blank" href="/flow.html">測試的實例</a></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><table border="0" width="98%" cellPadding="0" cellSpacing="1" class="m20080111"><tr><td colSpan="2">更新日期:2008/01/16</td><td colSpan="7" align="center">Windows</td></tr><tr><th width="2%" align="right"></th><th width="42%" align="right"></th><th width="8%" align="center">IE7</th><th width="8%" align="center">IE6</th><th width="8%" align="center">IE5.5</th><th width="8%" align="center">FF</th><th width="8%" align="center">Ns</th><th width="8%" align="center">Op</th><th width="8%" align="center">Sf</th></tr><tr><td align="center">1</td><td align="right">float:left / right;</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td></tr><tr><td align="center">2</td><td align="right">&lt;div style=”clear:both;”&gt;&lt;/div&gt;</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td></tr><tr><td align="center">3</td><td height="23" align="right">height:(等于內容高度);</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td></tr><tr><td align="center">4</td><td align="right">:after</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td></tr><tr><td align="center">5</td><td align="right">overflow:hidden / auto;</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td></tr><tr><td align="center">6</td><td align="right">width:100%;</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td></tr><tr><td align="center">7</td><td align="right">height:1%;</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td></tr><tr><td align="center">8</td><td align="right">zoom:1;</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td></tr><tr><td align="center">9</td><td align="right">max-height:(等于或大于內容);</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td></tr><tr><td align="center">10</td><td align="right">min-height:(等于或小于內容);</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td></tr><tr><td align="center">11</td><td align="right">display:inline-block;</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td></tr><tr><td align="center">12</td><td align="right">display:table;</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td></tr><tr><td align="center">13</td><td height="23" align="right">height:(小于內容高度);</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td></tr></table>

[Ctrl A 全部選擇提示：你可先修改部分代碼，再按運行]
注意：以上表格元素是指，當內容被移出文檔流時清除元素對瀏覽器分支持
你是否也使用了以上表格元素或組合，如有更佳的消除浮動元素或方法，歡迎賜教！

上一篇：CSS教程:創建性感的CSS樣式表

下一篇：CSS教程:網頁文本漸變