IT工程師數位筆記本

前面的話

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

定義

clear 清除

　　值: left | right | both | none | inherit

　　初始值: none

　　應用于: 塊級元素(塊級元素指block元素，不包括inline-block元素)

　　繼承性: 無

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;}

 　　除了清除浮動外，常常也需要解決外邊距margin重疊的問題。這時，清除浮動和解決margin重疊的代碼如下

.clear:before,.clear:after{content:"";display:table;}
.clear:after{clear:both;}
.clear{zoom:1}