浮動 floats 是 css 中的一種布局方式。它的渲染位置在行框與包含塊之間，這樣就可以使行框內文字與浮動元素不重疊並且環繞它顯示。在布局過程中也經常會使用它來達到左右併排布局的效果。但是，由於浮動特性，容器如果沒有明確設定高度，會依照普通流內元素高度設定，這樣就會導致脫離普通流的浮動元素溢位容器，影響其後元素布局。
我們將現有已知的清楚浮動元素方法羅列下：
採用乙個html標籤，以及css的clear屬性，來手工清理浮動；
採用偽類:after，動態建立乙個塊元素，設定 clear 屬性，清理之前的浮動元素；
採用css overflow 非 visible 值(overflow:auto/overflow:hidden)設定使父容器包含浮動元素；
採用display:table/display:table-cell 等table系列屬性將父元素變成 table 形式自動包含浮動元素；
使用 table 以及 td 標籤作為浮動元素容器；
採用 float:left/float:right 方式將父元素同樣浮動，就可以包含浮動內容；
在 ie 6/7 的標準文件模式中設定 「width/height/zoom」 等樣式來自動清理浮動。
對這些方式我們一一來對照 css 標準（或者瀏覽器特性）來解釋下。
樣例：
.clear-floatclear 屬性是 css 1 就提供的用來清除浮動的樣式，設定了 clear 屬性的元素，其上邊框位置會緊貼浮動元素的 margin-bottom 邊界位置渲染，忽略其 margin-top 設定。這樣，父容器高度未設定(值是 auto)時，由於定義的清理浮動樣式元素所在位置處於浮動元素之下，容器計算後的實際高度就包含了浮動元素。
樣例：
.after-clear-float :after:after 偽元素是在 css 2 規範內提出的，ie 6/7 並不支援。它的作用是在指定該偽元素元素內，所有子元素最後自動生成乙個偽元素，並可以為這個偽元素設定樣式。在設定樣式中，使用 clear 屬性即可達到與手工新增元素指定清理的效果。
注意相容問題：
:after 偽元素在 ie6/7 中並不被支援，這是由於之前的 ie 版本僅完全實現了 css 1 規範標準，以及一部分 css 2 規範，恰巧 :after 偽元素不在實現之例。
此部分詳細內容可參考：rs8010: ie6 ie7 ie8(q) 不支援 ':before' 和 ':after' 偽元素
樣例：
.overflow-clear-floatoverflow 樣式值為 非 visilbe 時，實際上是建立了 css 2.1 規範定義的 block formatting contexts。建立了它的元素，會重新計算其內部元素位置，從而獲得確切高度。這樣父容器也就包含了浮動元素高度。這個名詞過於晦澀，在 css 3 草案中被變更為名詞 root flow，顧名思義，是建立了乙個新的根布局流，這個布局流是獨立的，不影響其外部元素的。實際上，這個特性與 早期 ie 的 haslayout 特性十分相似。或者.overflow-clear-float
注意相容問題：
block formatting contexts 概念是在 css 2.1 規範內被提出。因此 ie6/7 中並不被支援，這是由於之前的 ie 版本僅完全實現了 css 1 規範標準，以及一部分 css 2.0 規範。在 ie 7 中，overflow 值為非 visible 時，可以觸發 haslayout 特性。這同樣使得 ie 7 同樣可以使容器包含浮動元素。
此部分詳細內容可參考：rm8002: 不能同時在 ie6 ie7 ie8(q) 中觸發 haslayout 並在其他瀏覽器中建立 block formatting context 的元素在各瀏覽器中的表現會有差異
樣例：
.table-clear-float當元素 display 值被設定為 table 或 table-cell 時，同樣也建立了 css 2.1 規範定義的 block formatting contexts。這樣父容器也就包含了浮動元素高度。或者.table-clear-float
注意相容問題：
除去 block formatting contexts 在 ie 6/7 中的相容性外，display:talbe 系列樣式設定也不在 ie6/7 的支援範圍之內。
此部分詳細內容可參考：rm8001: 各瀏覽器對 'display' 特性值的支援程度不同
樣例：
當使用 table td th 等 table 系列標籤時， 元素的 display 值實際上說是 display: table 系列，這同樣也建立了 css 2.1 規範定義的 block formatting contexts。這樣父容器也就包含了浮動元素高度。同時在 ie 6/7 中，table td th 等 table 系列標籤天然擁有 haslayout 特性，這也可以使容器自動包含浮動元素高度。
當元素設定 float:left/float:right 時 ，同樣也建立了 css 2.1 規範定義的 block formatting contexts。這樣父容器也就包含了浮動元素高度。同時，這個樣式也會在 ie 6/7 內觸發 haslayout 特性，擁有這個特性的元素也可以計算出浮動元素的高度，使父元素包含他們。
樣例：
haslayout-clear-float:'layout' 是 ie 的專有概念，它決定了元素如何對其內容進行定位和尺寸計算，與其他元素的關係和相互作用，以及對應用還有使用者的影響。或.haslayout-clear-float:
或.haslayout-clear-float:
'layout' 可以被某些 css property（特性）不可逆的觸發，而某些 html 元素本身就具有 layout 。
'layout' 在 ie 中可以通過 haslayout 屬性來判斷乙個元素是否擁有 layout ，如 object.currentstyle.haslayout 。
'layout' 是 ie 瀏覽器渲染引擎的乙個內部組成部分。在 ie 瀏覽器中，乙個元素要麼自己對自身的內容進行組織和計算大小， 要麼依賴於包含塊來計算尺寸和組織內容。為了協調這兩種方式的矛盾，渲染引擎採用了 'haslayout' 屬性，屬性值可以為 true 或 false。 當乙個元素的 'haslayout' 屬性值為 true 時，我們說這個元素有乙個布局（layout），或擁有布局。
注意相容問題：
haslayout 特性僅 ie 支援，其他瀏覽器並無此特性。可以依靠計算布局清理浮動的 haslayout 特性僅在 ie 6/7 中存在，ie8 之後將使用 css 2.1 的 block formatting contexts 定義來達到同樣效果。
以上內容是常見清理浮動手段生效的規範（和瀏覽器廠商特性）原理。我們希望頁面開發者們，根據他們的相容性特徵以及實際情況來組合使用，以便達到實際專案目標。
作業系統版本:
windows 7 ultimate build 7600
瀏覽器版本:
ie6ie7
ie8ie9
firefox 4.0.1
chrome 12.0.742.100
safari 5.0.5
opera 11.11
測試頁面:
2011-06-17
clear table td overflow table-cell haslayout float 浮動 block formatting context 清理 清理浮動 清除浮動
清除浮動的幾種方法
1.浮動元素下加空div 為了統一樣式，我們新建乙個樣式選擇器class命名為 clear 並且對應選擇器樣式為 clear both 然後我們在父級 結束前加此div引入class clear 樣式。這樣即可清除浮動。這個class 清除float產生浮動，可以不用對父級設定高度 也無需技術父級高...
清楚浮動的幾種方法
清楚浮動的幾種方法 為什麼我們用float left right之後會對其父輩或兄弟元素產生影響 浮動框不在普通的文件流中，它脫離了文件流，所以包圍的內容的不佔據空間。如下面的 1221233 uriiot rrr如何讓包圍的元素在視覺上包圍浮動元素呢？1 在緊靠最後乙個浮動元素之後新增乙個空元素並...
清除浮動的幾種方法
當元素浮動時，他將不再處於普通文件流中，相當於浮在文件之上，不佔據空間，但是會縮短行寬，產生文字環繞的效果。浮動帶來的影響 1，父級的高度塌陷 2.背景不能顯示 3.變框不能撐開 4.margin值不能正確顯示 5.產生文字環繞的效果 6.由於脫離文件流，不佔位，而後面的元素未脫離文件流導致後面的元...