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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。