css清除浮動

前言

之因此要清除浮動，就是解決浮動元素形成的一些問題，如包含塊高度塌陷，浮動流形成的佈局混亂等問題。

clear清除

值: left | right | both | none | inherit
初始值: none
應用於: 塊級元素(塊級元素指block元素，不包括inline-block元素)
繼承性: 無

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

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

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

效果展現：

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

【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僞元素

【BFC】
觸發條件：

[1]float: left/right

[2]position:absolute/fixed

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

[4]overflow:hidden/scroll/auto

【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外

兼容寫法

【版本1】

.clear:after{content:""; display: block; clear: both;}
.clear{zoom: 1;} // IE六、7兼容

【版本2】

.clearfix:before,.clear:after{content:"";display:table;} // 由於display: table會產生一些匿名盒子，這些匿名盒子的其中一個（display值爲table-cell）會造成Block Formatting Context。
.cleafixr:after{clear:both;}
.clearfix{zoom:1} // IE六、7兼容

效果展現：