当前位置:Gxlcms > html代码 > 兼容性好的overflowCSS清除浮动一例_html/css_WEB-ITnose

兼容性好的overflowCSS清除浮动一例_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:15人阅读

清除浮动似乎写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代码部分如下:

02
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

人气教程排行