解釋下浮動和它的工作原理

• 解釋下浮動和它的工作原理。

 　　　　問題成因：在一個容器中，有兩個浮動的子元素，會造成顯示結果意想不到的問題。在CSS規范中，浮動定位不屬於正常的頁面流，而是獨立定位的。

　　　　關於css的定位機制：普通流，浮動，絕對定位（position：fixed是position：absolute的一個子類）。浮動的框可以左右移動，直到它的外邊緣遇到包含框或者另一個浮動框的邊緣，所以才說浮動定位不屬於正常的頁面流。文檔中的普通流就會表現得和浮動框不存在一樣，當浮動框高度超出包含框的時候，就會出現包含框不會自動伸縮高度類筆盒浮動元素。所以，只含有浮動元素的父容器在顯示時不需要考慮子元素的位置，就造成顯示父容器像空容器一樣。

　　　　解決浮動：

　　　　1）添加額外標簽 
　　　　　　在浮動元素末尾添加一個空的標簽例如 <div style=”clear:both”></div>。 

　　　　　　優點：通俗易懂，容易掌握 
　　　　　　缺點：可以想象通過此方法，會添加多少無意義的空標簽，有違結構與表現的分離，在后期維護中將是噩夢。 
　　　　2）使用 br標簽和其自身的 html屬性 <br clear="all" /> 

　　　　　　優點：比空標簽方式語義稍強，代碼量較少 
　　　　　　缺點：同樣有違結構與表現的分離，不推薦使用 
　　　　3)父元素設置 overflow：hidden 
　　　　　　通過設置父元素overflow值設置為hidden；在IE6中還需要觸發 hasLayout ，例如 zoom：1。<div class="warp" id="float3" style="overflow:hidden; *zoom:1;"> 

　　　　　　優點：不存在結構和語義化問題，代碼量極少 
　　　　　　缺點：內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素；overflow:hidden會導致中鍵失效。 
　　　　4)父元素設置 overflow：auto 屬性。同樣IE6需要觸發hasLayout，演示和3差不多 
　　　　　　優點：不存在結構和語義化問題，代碼量極少 
　　　　　　缺點：多個嵌套后，firefox某些情況會造成內容全選；IE中 mouseover 造成寬度改變時會出現最外層模塊有滾動條等，firefox早期版本會無故產生focus等。
　　　　5）使用:after 偽元素 
　　　　需要注意的是 :after是偽元素（Pseudo-Element），不是偽類（某些CSS手冊里面稱之為“偽對象”），很多清除浮動大全之類的文章都稱之為偽類，不過csser要嚴謹一點，這是一種態度。由於IE6-7不支持:after，使用 zoom:1觸發 hasLayout。 

　　　　.clearfix:after {content:" "; display:block; visibility:hidden; clear:both; } 
　　　　.clearfix { *zoom:1; }

　　　　　　優點：結構和語義化完全正確,代碼量居中 
　　　　　　缺點：復用方式不當會造成代碼量增加