DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 兼容性好的overflow CSS清除浮動一例
兼容性好的overflow CSS清除浮動一例
編輯:CSS詳解     
  • 清除浮動似乎寫css的都要用到,不過各大浏覽器存在兼容性,這樣我們這些CSSer們很頭疼,為了一個清除浮動,甚至要寫很多個代碼來兼容。從實踐中摸索,找到一種簡單的清除浮動的辦法,不單使用簡單,而且FF火狐、Opera、Chrome、IE8都支持,使用時只要為需要清浮動的標簽加上overflow屬性即可。以下來一個完整的例子供參考:

    CSS代碼部分:

    01 ul{ 02 list-style:none; 03 height:auto; 04 margin:0;p 05 adding:0; 06 background-color:#436973; 07 } 08 li{ 09 float:left; 10 width:80px; 11 height:80px; 12 background-color:#83B1DF; 13 } 14 .demo{ 15 clear:both; 16 border:1px solid #FF00FF; 17 margin-bottom:5px; 18 } 19 .overflow{ 20 overflow:auto; 21 zoom:1; 22 background-color:#43FF73; 23 } 24 ul{ 25 list-style:none; 26 height:auto; 27 margin:0; 28 padding:0; 29 background-color:#436973; 30 } 31 li{ 32 float:left; 33 width:80px; 34 height:80px; 35 background-color:#83B1DF; 36 } 37 .demo{ 38 clear:both; 39 border:1px solid #FF00FF; 40 margin-bottom:5px; 41 } 42 .overflow{ 43 overflow:auto; 44 zoom:1; 45 background-color:#43FF73; 46 }

    Html代碼部分如下:

    vIEw source print? 01 <div class="demo"> 02 <ul class="overflow"> 03 <li>1</li> 04 <li>2</li> 05 <li>3</li> 06 <li>4</li> 07 <li>5</li> 08 <li>6</li> 09 <li>7</li> 10 <li>8</li> 11 <li>9</li> 12 </ul> 13 </div> 14 <div class="demo"> 15 <ul> 16 <li>1</li> 17 <li>2</li> 18 <li>3</li> 19 <li>4</li> 20 <li>5</li> 21 <li>6</li> 22 <li>7</li> 23 <li>8</li> 24 <li>9</li> 25 </ul> 26 </div>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved