中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

當(dāng)元素設(shè)置浮動(dòng)(float)后會(huì)被移出文檔流，相信大家都會(huì)經(jīng)常遇到這樣的問題。

這問題的解決辦法有N種之多，因?yàn)槊糠N瀏覽器對(duì)CSS的解析各異，所以在不同瀏覽器使用清除浮動(dòng)的元素也會(huì)有所不同。

我認(rèn)為目前還沒有最好的清除浮動(dòng)元素或組合，而是根據(jù)情況分析而選擇，最好的清除浮動(dòng)元素或組合。

為了兼容不同瀏覽器，可能要使用不同的清除浮動(dòng)元素組合使用，如：{overflow:hidden; zoom:1;}、{display:table; width:100%;}、{overflow:hidden; height:1%;}

以下分析了部份的消除浮動(dòng)元素對(duì)瀏覽器的支持：

測(cè)試的實(shí)例

運(yùn)行代碼框
<p>為了兼容不同瀏覽器，可能要使用不同的清除浮動(dòng)元素組合使用，如：{overflow:hidden; zoom:1;}、{display:table; width:100%;}、{overflow:hidden; height:1%;}</p> <p>以下分析了部份的消除浮動(dòng)元素對(duì)瀏覽器的支持：</p> <p><span id="more-24"></span><a target="_blank" href="/articleimg/2008/02/5306/flow.html">測(cè)試的實(shí)例</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:(等于內(nèi)容高度);</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:(等于或大于內(nèi)容);</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:(等于或小于內(nèi)容);</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:(小于內(nèi)容高度);</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 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]

注意：以上表格元素是指，當(dāng)內(nèi)容被移出文檔流時(shí)清除元素對(duì)瀏覽器分支持

你是否也使用了以上表格元素或組合，如有更佳的消除浮動(dòng)元素或方法，歡迎賜教！

經(jīng)典論壇討論：
http://bbs.blueidea.com/thread-2828322-1-1.html

本文鏈接：http://www.95time.cn/tech/web/2008/5306.asp　

出處：藍(lán)色理想
責(zé)任編輯：moby

◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。