兼容性好的overflow CSS清除浮動一例

清除浮動彷佛寫css的都要用到，不過各大瀏覽器存在兼容性，這樣咱們這些CSSer們很頭疼，爲了一個清除浮動，甚至要寫不少個代碼來兼容。從實 踐中摸索，找到一種簡單的清除浮動的辦法，不單使用簡單，並且FF火狐、OPera、Chrome、IE8都支持，使用時只要爲須要清浮動的標籤加上 overflow屬性便可。如下來一個完整的例子供參考：

CSS代碼部分：

    ul{    
    list-style:none;    
    height:auto;    
   margin:0;p    
    adding:0;    
    background-color:#436973;    
    }    
    li{    
    float:left;    
    width:80px;    
    height:80px;    
    background-color:#83B1DF;    
    }    
    .demo{    
    clear:both;    
    border:1px solid #FF00FF;    
    margin-bottom:5px;    
    }    
   .overflow{    
    overflow:auto;    
    zoom:1;    
    background-color:#43FF73;    
    }    
    ul{    
    list-style:none;    
    height:auto;    
  margin:0;    
   padding:0;    
    background-color:#436973;    
   }    
    li{    
    float:left;    
    width:80px;    
    height:80px;    
    background-color:#83B1DF;    
    }    
    .demo{    
    clear:both;    
    border:1px solid #FF00FF;    
    margin-bottom:5px;    
   }    
    .overflow{    
    overflow:auto;    
   zoom:1;    
    background-color:#43FF73;    
   }

HTML代碼部分以下：

<div class="demo">02    <ul class="overflow">    
    <li>1</li>    
    <li>2</li>    
    <li>3</li>    
   <li>4</li>    
    <li>5</li>    
    <li>6</li>    
    <li>7</li>    
   <li>8</li>    
    <li>9</li>    
    </ul>    
    </div>    
   <div class="demo">    
    <ul>    
    <li>1</li>    
    <li>2</li>    
    <li>3</li>    
    <li>4</li>    
    <li>5</li>    
    <li>6</li>    
    <li>7</li>    
    <li>8</li>    
    <li>9</li>    
    </ul>    
    </div>