2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

清除浮動(dòng)似乎寫css的都要用到，不過(guò)各大瀏覽器存在兼容性，這樣我們這些CSSer們很頭疼，為了一個(gè)清除浮動(dòng)，甚至要寫很多個(gè)代碼來(lái)兼容。從實(shí) 踐中摸索，找到一種簡(jiǎn)單的清除浮動(dòng)的辦法，不單使用簡(jiǎn)單，而且FF火狐、OPera、Chrome、IE8都支持，使用時(shí)只要為需要清浮動(dòng)的標(biāo)簽加上 overflow屬性即可。以下來(lái)一個(gè)完整的例子供參考：

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>

轉(zhuǎn)載于:https://my.oschina.net/u/2460148/blog/626166

總結(jié)

以上是生活随笔為你收集整理的兼容性好的overflow CSS清除浮动一例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。