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

最新推荐文章于 2022-02-14 14:43:06 发布

weixin_33758863

最新推荐文章于 2022-02-14 14:43:06 发布

阅读量115

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/2460148/blog/626166

版权

2019独角兽企业重金招聘Python工程师标准>>>

清除浮动似乎写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>

转载于:https://my.oschina.net/u/2460148/blog/626166