L6. 清除浮動

清除浮動

　　浮動元素以後的元素會自動圍繞該浮動元素。若是不但願周圍有元素圍繞，則能夠爲這些元素定義「clear」屬性以清除浮動。clear 的屬性有及其值爲：

　　clear: left;　清除左邊的浮動對象，若是左邊存在浮動對象，則當前元素會在浮動對象底下顯示。
　　clear: right;　清除右邊的浮動對象，若是右邊存在浮動對象，則當前元素會在浮動對象底下顯示。
　　clear: both;　清除左右兩邊的浮動對象，無論哪邊存在浮動對象，當前元素都會在浮動對象底下顯示。
　　clear: none;　默認值，容許兩邊均可以有浮動對象，當前元素浮動元素不會換行顯示。
　　有不少技巧能夠作到清理浮動元素，但不引入額外的無語義標籤。下面三種是比較常見的作法：

　　一、插入一個使用不浮動的空區塊（clear: both;）。
　　插入一個清除元素是使父級容器能正確包含其全部浮動元素是一種標準的作法（即插入一個非浮動區塊<div class="clearbox"></div>），這樣作能實現將父級容器的底部邊緣「拖拉」以包裹所含元素的效果。

　　二、在容器元素上使用 overflow: hidden。
　　對於基於浮動設計的佈局來講，一個常見的問題就是浮動元素的容器不會自動伸展來包含浮動元素。若是但願在全部的浮動元素的外面加上邊框（如在容器元素上加上邊框），這時必須告訴瀏覽器伸展容器以包含浮動元素，這時就可以使用 overflow 的方法。

　　三、使用 :after 這樣的 CSS 僞類。
　　建立一個不可見的高 度爲0的塊元素：使用 :after 來插入一個點號，而且設置它的屬性爲 clear: both。可是容器底部會有一絲空隙，因此還要設置 height: 0px; 和 visibility: hidden; 來去除這個空隙。 *zoom:1 用來兼容IE6/7

.clearfix:after{
    content:"."; 
    display:block; 
    height:0; 
    visibility:hidden; 
    clear:both;
}
.clearfix{
    *zoom:1; /* display:inline-block*/
}

　　　浮動清除只能適用浮動對象之間的清除，爲非浮動對象定義清除屬性是無效的。但 IE 瀏覽器不支持這種標準。當一個浮動元素定義了 clear 屬性，它不會對前面的任何對象產生影響，也不會對後面的對象造成影響，只會影響本身的佈局位置。這裏的影響是指不會主動改變別的對象的位置。浮動清除不只針對相鄰浮動元素對象，只要在佈局頁面裏水平接觸都會實現清除操做。
　　使用浮動元素包含浮動元素這樣的佈局方式有一個潛在的缺點，其實現效果將取決於瀏覽器的對 CSS 的支持與解析。特別是當浮動元素是一個更爲複雜的佈局中的一部分的話，將變得更加複雜。鑑於瀏覽器對流動模型解析的一致性，所以大多數時候，浮動模型只是做爲流動模型佈局的輔助與補充，這不失爲一個很好的佈局原則。

另外，還有一種新的方法清除浮動。http://nicolasgallagher.com/micro-clearfix-hack/

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

content: " "帶空格,  對於清除浮動不是必要的,但它能夠防止top-margins發生摺疊collapsing。:before

display: table; 會產生一個 anonymous table-cell 和一個新的BFC,因此不須要height:0; visibility:hidden; 這兩句代碼了。

摘自： http://huhaiqia.blog.163.com/blog/static/1011519482010864923907/