清除浮動效果的方法

有幾十種方法可以清除浮動效果，以確保包含所有後代（包括浮動子女）的包含塊。清除浮動效果的方法

使用標記：<div style="clear:both;"></div>
創建一個新的塊格式上下文：
- 浮動
- 絕對定位
- 具有更不尋常的特性中的一個的顯示屬性值（表單元等）
- 溢出

我的問題是：有沒有其他方法？

非常感謝您的幫助！

2011-06-13 eileen Tao

相關http://stackoverflow.com/questions/490184/what-is-the-best-way-to-clear-the-css-style-float – BoltClock 2011-06-13 08:29:33

謝謝，但我已經給出了這些方法什麼鏈接說過。我想知道的是另一種方法。 – 2011-06-13 08:32:53

一些方法你未涉及您的問題：

display: inline-block - 我真的不會計算爲"an unusual display value"，雖然它不是通常用於清除，因爲花車它的副作用（如收縮包裝）：http://jsfiddle.net/CLXbc/

clearfix類 - 這是一種常見的技術 - http://jsfiddle.net/CLXbc/1/

/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements. 
    j.mp/bestclearfix */ 
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } 
.clearfix:after { clear: both; } 
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */ 
.clearfix { zoom: 1; }

到目前爲止，兩種最常用的方法是overflow: hidden和clearfix。

經歷的其他選項，這裏就是爲什麼他們是不是最佳：

"using markup:<div style="clear:both;"></div>" - 這不是語義。在整個HTML中濺出清除div是一個糟糕的選擇。
"is floated" - 這可行，但你通常不想收縮包裝。
"is absolutely positioned" - 你通常不希望你的元素被絕對定位。
"has a display property value of one of more unusual properties(table-cell,etc.)" - display: table-cell在IE7中無法正常工作。但又一次，您不希望產生副作用。

我在大多數情況下使用overflow: hidden。有時候我不能用那個，for example here。在這些情況下，我通常回退到clearfix。

來源

2011-06-13 08:56:52 thirtydot

非常感謝你，clearfix類是我真正想知道的。 – 2011-06-13 09:49:29