Rumah  >  Artikel  >  hujung hadapan web  >  兼容性好的overflow CSS清除浮动一例_html/css_WEB-ITnose

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

WBOY
WBOYasal
2016-06-21 08:55:541256semak imbas

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


Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn