CSS清浮動

前面的話

　　人們經常談起清浮動，其實就是解決浮動元素的包含塊高度塌陷的問題

定義

　　clear 清除

　　值: left | right | both | none | inherit

　　初始值: none

　　應用於: 塊級元素

　　繼承性: 無

left:左側不允許存在浮動元素
right:右側不允許存在浮動元素
both:左右兩側不允許存在浮動元素
none:允許左右兩側存在浮動元素

　　[註意]設置clear屬性的元素並不能改變浮動元素，而只能改變自身

　　CSS2.1引入了一個清除區域，清除區域是在元素上外邊距之上增加的額外間隔，不允許任何浮動元素進入這個範圍，這意味著元素設置clear屬性時，它的外邊距不改變

方法

　　對於標準瀏覽器來說，清浮動其實就兩種方法，一種是在浮動元素下麵添加新元素設置clear屬性；另一種是觸發包含塊的BFC，使其包含浮動元素。而對於IE7-瀏覽器，則用到其特有屬性haslayout

【1】clear屬性

　　[1]<div style="clear:both"></div>

　　<註意>並不是很適用，若包含塊為<ul>，則子元素只能為<li>，則在<li>後面添加<div>元素不合適

　　[2]<br style="clear:both">

　　<註意>雖然clear屬性只應用於塊級元素，但在除IE7-以外的其他瀏覽器都可以將clear屬性應用於<br>元素

　　[3]為浮動元素的after偽元素設置clear屬性

　　.clear:after{content:""; display: block; clear: both;}

　　<註意>IE7-瀏覽器不支持after偽元素

【2】BFC

　　[1]float: left/right

　　[2]position:absolute/fixed

　　[3]display:inline-block/table-cell/table-caption/flex

　　[4]overflow:hidden/scroll/auto

　　關於BFC的詳細信息移步至此

【3】IE7-

　　關於IE7-瀏覽器有一個其特有的屬性haslayout，當觸發包含塊的haslayout時，浮動元素被layout元素自動包含

　　[1]display:inline-block

　　[2]height/width:除auto外

　　[3]float: left/right

　　[4]position: absolute

　　[5]writing-mode: tb-rl

　　[6]zoom: 除normal外

　　關於haslayout的詳細信息移步至此

相容

　　在所有瀏覽器中都相容的清浮動方案如下：

.clear:after{content:""; display: block; clear: both;}
.clear{zoom: 1;}