幺妹直播官方版_幺妹直播直播视频在线观看免费版下载_幺妹直播安卓高清版下载

首頁 > 教程 > 關(guān)鍵詞  > 清除最新資訊  > 正文

清除浮動的方法

2009-05-27 09:05 · 稿源：twinsenliang.net

在CSS森林(30247792)群里討論一個margin的問題中無意間發(fā)現(xiàn)overflow也可以用來清除浮動，嘿嘿，這個方法不單使用簡單，而且FF、OP、IE7都支持，從此可以告別那又長兼容性又差的FF清浮動的方法了。

方法真的很簡單，只要為需要清浮動的標簽加上overflow這個屬性。

引用CSS代碼

以下為引用的內(nèi)容：

  1. ul{
  2. list-style:none;
  3. height:auto;
  4. margin:0;
  5. padding:0;
  6. background-color:#436973;
  7. }
  8. li{
  9. float:left;
  10. width:80px;
  11. height:80px;
  12. background-color:#83B1DF;
  13. }
  14. .demo{
  15. clear:both;
  16. border:1px solid #FF00FF;
  17. margin-bottom:5px;
  18. }
  19. .overflow{
  20. overflow:auto;
  21. zoom:1;
  22. background-color:#43FF73;
  23. }

引用HTML代碼

以下為引用的內(nèi)容：

  1. <div class="demo">
  2. <ul class="overflow">
  3. <li>1</li>
  4. <li>2</li>
  5. <li>3</li>
  6. <li>4</li>
  7. <li>5</li>
  8. <li>6</li>
  9. <li>7</li>
  10. <li>8</li>
  11. <li>9</li>
  12. </ul>
  13. </div>
  14. <div class="demo">
  15. <ul>
  16. <li>1</li>
  17. <li>2</li>
  18. <li>3</li>
  19. <li>4</li>
  20. <li>5</li>
  21. <li>6</li>
  22. <li>7</li>
  23. <li>8</li>
  24. <li>9</li>
  25. </ul>
  26. </div>

其中zoom是為了IE6準備的。

完整的Demo

注：忘了一個很重要的內(nèi)容，并不是所有的overflow屬性都可起來一樣的效果，比如visible屬性就只能對IE起作用。例子可以看這里Demo2

這樣的話就有一個問題啦，如果要有高度，而且內(nèi)容超出高度的時候，定義auto或hidden都可能會有一些不想要的效果出現(xiàn)。這里提供一個解決方案：對于IE6及以下版本的IE，可以直接定義高度;對于IE7、FF、OP，可定義min-height。

引用CSS代碼

以下為引用的內(nèi)容：

  1. .overflow{
  2. height:auto;
  3. _height:200px;
  4. min-height:200px;
  5. overflow:auto;
  6. zoom:1;
  7. _overflow:visible;
  8. }

轉(zhuǎn)自鬼仔的Blog，他寫的時候用的是最簡單，測試后覺得是最優(yōu)秀的，因為不會有其余的非語義的編碼。

本文經(jīng)已更新后續(xù)技術(shù)，請關(guān)注:https://chinaz.com/Design/Pages/052MIQ2009.html

（舉報）

  • 相關(guān)推薦
關(guān)鍵詞：

熱文

站長商機

廣告