本文複製自
1. 問題的由來
有這樣一種情形：在乙個容器（container）中，有兩個浮動的子元素。
在瀏覽器中一執行，就會出現意想不到的結果。實際檢視是子元素顯示在父容器的外部。
2. 問題的原因與浮動定位有關。
在css規範中，浮動定位不屬於正常的頁面流（page flow），是獨立定位的。所以，只含有浮動元素的父容器，在顯示時不考慮子元素的位置，就當它們不存在一樣。這就造成了顯示出來，父容器好像空容器一樣。
3.解決方法一：新增空元素
經典的解決方法，就是在浮動元素下方新增乙個非浮動元素。
**這樣寫：
原理是父容器現在必須考慮非浮動子元素的位置，而後者肯定出現在浮動元素下方，所以顯示出來，父容器就把所有子元素都包括進去了。這種方法比較簡單，但是要在頁面中增加冗餘標籤，違背了語義網的原則。
4.解決方法二：浮動的父容器
另一種思路是，索性將父容器也改成浮動定位，這樣它就可以帶著子元素一起浮動了。
這種方法不用修改html**，但是缺點在於父容器變成浮動以後，會影響到後面元素的定位，而且有時候，父容器是定位死的，無法變成浮動。
5.解決方法三：浮動元素的自動clearing
讓父容器變得可以自動"清理"（clearing）子元素的浮動，從而能夠識別出浮動子元素的位置，不會出現顯示上的差錯。
要做到這點，只要為父容器加上一條"overflow: hidden"的css語句就行了。**這樣寫：
清除浮動的方法及原理
1.overflow hidden scroll auto，hidden可以清除浮動但有可能隱藏有用的東西，這個屬性定義溢位元素 內容區的內容會如何處理 不推薦 預設值為visible，scroll內容會被修剪，其餘內容可見，hidden會被 修剪其餘內容不可見，auto若被修剪則其餘按滾動條顯示若...
清除浮動的方法及原理
用下面 來體會 我是乙個即將要左浮動的盒子 我是乙個文字盒子 我是乙個底部盒子 效果圖是 給floatdiv盒子加上浮動後 很明顯浮動主要帶來了兩方面的影響 一 對父盒子topdiv高度影響 子盒子浮動，會讓父盒子的高度塌陷，如果父盒子沒有內容，高度會變成0，所以叔父盒子bottomdiv因為浮動的...
清除浮動原理
在css中，我們有時會用到浮動屬性。簡單來說，標準流文件中，塊元素會佔據整行來顯示，比如div，h標籤等。後面的標籤會依次往後。但是用了浮動之後，就會脫離文件流，意味著後面的標籤可能會被擋住，引起布局混亂。因為浮動元素無法撐起父元素的高度 高度塌陷 那麼又想使用浮動屬性，又想讓後面元素按標準文件流布...