CSS 清除浮動的最優方法

2021-04-18 18:25:03 字數 768 閱讀 4813

在css森林群裡討論乙個margin的問題中無意間發現overflow也可以用來清除浮動,嘿嘿,這個方法不單使用簡單,而且ff、op、ie7都支援,從此可以告別那又長相容性又差的ff清浮動的方法了。

方法真的很簡單,只要為需要清浮動的標籤加上overflow這個屬性。

css**

ul li .demo .overflow ul li .demo .overflow  

網頁教學網

html**

webjx.com

其中zoom是為了ie6準備的。

webjx.com

完整的demo

注:忘了乙個很重要的內容,並不是所有的overflow屬性都可起來一樣的效果,比如visible屬性就只能對ie起作用。例子可以看這裡demo2 這樣的話就有乙個問題啦,如果要有高度,而且內容超出高度的時候,定義auto或hidden都可能會有一些不想要的效果出現。這裡提供乙個解決方案:對於ie6及以下版本的ie,可以直接定義高度;對於ie7、ff、op,可定義min-height。

css**

overflow  webjx.com

閉合浮動元素:針對firefox用overflow:auto。針對ie用*height:1%或者zoom:1。個人覺得overflow:auto少用為妙,會有些莫明其妙的問題。 最好用這個方法:

.clearfix:after /* hides from ie-mac /*/ * html .clearfix /* end hide from ie-mac */

清除浮動的最優方法

以下內容 在css森林 30247792 群裡討論乙個margin的問題中無意間發現overflow也可以用來清除浮動,嘿嘿,這個方法不單使用簡單,而且ff op ie7都支援,從此可以告別那又長相容性又差的ff清浮動的方法了。方法真的很簡單,只要為需要清浮動的標籤加上overflow這個屬性。引用...

css清除浮動方法

html 浮動 不想被浮動影響 css wrap float nofloat 現在雖然加了乙個空的div,但是並沒有給它清除浮動,所以目前的效果就是第三個子元素.nofloat還是收到浮動的影響。ok,現在給.clear加上清除浮動 clear ps 這種情況比較適合元素之間是垂直排列布局的,為了不...

css 清除浮動方法

1 額外標籤法 隔牆法 style clear both div 2 父級 overflow hidden style overflow hidden div 3 父級 after 偽元素 clearfix after clearfix 4 父級雙偽元素 clearfix before,clearf...