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

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

php中文网

发布： 2016-06-21 08:55:54

原创

1544人浏览过

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

可图大模型

可图大模型（Kolors）是快手大模型团队自研打造的文生图AI大模型

110

查看详情

<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>

登录后复制

大家都在看：

html列表如何横向_HTML列表（ul+CSS）横向排列布局方法 HTML网页favicon如何设置_HTML网页favicon图标设置指南为什么HTML在线布局错乱_HTML在线布局错乱问题分析与CSS修复方案 HTML代码怎么实现跨平台兼容_HTML代码跨平台兼容性解决方案与测试方法构建响应式多列布局：利用浮动和媒体查询实现自适应设计