清除浮動知識總結

2021-07-24 06:14:42 字數 1266 閱讀 9856

清除浮動是乙個經常碰到的問題,也是有點讓人頭疼的東西.

什麼時候要用到清除浮動呢?當元素內部有子元素浮動時,父元素的高度無法被撐起,下面的元素沒辦法定位,這時候就需要用到清除浮動.

我總結的清除浮動的方法有三種:

1.clear:both

clear:both一般是浮動元素周圍的元素所用到的,多說無益,看下面的**:

//html

div id="left">

div>

//css

#left

#right效果:

可以看到,黑色div浮動之後,他下面的黃色div使用了clear:both,但是這種清除浮動方式我用的不是很多,因為有時候可能要在html中新增沒有意義的div來清理浮動.

2.overflow:hidden

這種方式是我目前用的比較多的,因為不需要加div,而且**量也不多.這種方式與clear的主要區別是:overflow是設定在浮動元素的父div之上.**如下:

//html

div id="container">

div>

div>

div>

//css

#container

#left

#right效果圖和上面的圖一樣,所以這裡就不上圖了.但是overflow:hidden特殊情況下可能會有***,因為它有可能將你想要浮動在父元素外面的元素隱藏掉.但是,我還是喜歡用^_^.(最近更新:overflow:hidden這種方法早已棄用!!!)

3.clear:fix

這種清除浮動方式貌似比較酷炫?但是css**有點多,不過這種方式好像沒有什麼不良的影響,方法呢,是在父元素上面新增clearfix樣式.然後通過:after偽類的方式來清除浮動,**如下:

//html

"container" class="clearfix">

"left">

"right">

//css

.clearfix:after

#left

#right

效果圖和第乙個一樣.

清除浮動總結完畢!

最近更新:

最近又發現一種方法,**更少:

clearfix

:after

清除浮動總結

父級元素沒有高度 內容需要從後台獲取時,不確定內容多少,此時父級元素不設定高度 子盒子浮動了。影響下面布局了,我們就應該清除浮動了 清除浮動的方式 優點缺點 額外標籤法 隔牆法 通俗易懂,書寫方便 新增許多無意義的標籤,結構化較差。父級新增overflow hidden 屬性 書寫簡單 溢位隱藏 父...

浮動與清除浮動總結

清除浮動 浮動 左浮動 右浮動 浮動會使塊元素脫離標準流,可以讓多個塊在同一行顯示,下方的標準流盒子會上浮到給了浮動的盒子下面 類名當布局需要多個塊級元素需要一行顯示的時候可以使用浮動 在開發過程中我們經常將其定義在common.css中,其定義如下 fl fr在同級多個元素需要浮動的時候,直接在類...

清除浮動大總結

清除浮動 是每乙個 web前台設計師 必須掌握的機能。為什麼浮動這麼難?因為浮動會使當前標籤產生向上浮的效果,同時會影響到前後標籤 父級標籤的位置及 width height 屬性。而且同樣的 在各種瀏覽器中顯示效果也有可能不相同,這樣讓清除浮動更難了。解決浮動引起的問題有多種方法,但有些方法在瀏覽...