CSS清除浮動

標籤：樣式   over   splay   清除   原理   添加   基本   方法   問題   

浮動----會使當前標籤產生上浮效果，從而導致父標籤高度塌陷的問題

1. 給父元素指定高度

　　<div style="height:200px">

　　　　<div style="float:right"></div>

　　</div>

　　簡單粗暴！高度不定時，如果內部高度大於父級時，容易產生問題

2. 在浮動元素後邊添加額外標籤

　　<div>

　　　　　<div style="float:right"></div>
　　　　　<div style="clear:both"></div>

　　</div>

　　其他<p> <br/>標籤也可以

　　會產生空標籤，導致代碼混亂，不易維護，且代碼的直觀感覺很不好

3. 給父標籤添加 overflow:hidden;zoom:1 或者 overflow:hidden;width:98% 樣式

　　<div style="overflow:hidden; zoom:1">

　　　　<div style="float:right"></div>

　　</div>

　　添加 zoom:1 是為了相容IE6，zoom 和 width 二者必有一個，但是不能設定height值，瀏覽器能夠自動擷取浮動地區高度，

　　且不能與position一同使用，因為會引起超出尺寸的隱藏問題。

4. 給父標籤設定 overflow:auto

　　<div style="overflow:auto; zoom:1">

　　　　<div style="float:right"></div>

　　</div>

　　與 3 基本相同，只引起的問題是若內部高度高出父級時會出現滾軸

5. 給父元素添加浮動，大家一起變成一個整體的浮動塊

　　<div style="float:left; zoom:1">

　　　　<div style="float:right"></div>

　　</div>

　　會引起新的浮動問題

6. 給父標籤添加 display:table

　　<div style="display:table; zoom:1">

　　　　<div style="float:right"></div>

　　</div>

　　 父級div屬性變成表格，可能會引起其他位置問題

7. 給父標籤添加絕對位置

　　<div style="position:absolute; zoom:1">

　　　　<div style="float:right"></div>

　　</div>

　　與 5 原理相通，都是將父元素脫離原始文字資料流，導致的問題也可能相似，可依舊使用該方法予以解決

8. 給父標籤定義偽類 :after ，和zoom:1

　　.clearfix:after {display:block; clear:both; content:""; visibility:hidden; height:0}

　　.clearfix {zoom:1}

　　<div class="clearfix">

　　　　<div style="float:right"></div>

　　</div>

CSS清除浮動