清除浮動的三種常用方式

2021-08-09 07:41:36 字數 839 閱讀 3473

清除浮動目的 : 主要為了解決父級元素因為子級浮動引起內部高度為0 的問題。

1. 父級新增overflow屬性方法

給父級新增 :overflow:hidden|auto|scroll;加三者任一都可以實現 .

優點: **簡潔

缺點: 內容增多時候容易造成不會自動換行導致內容被隱藏掉,無法顯示需要溢位的元素。

2.使用after偽元素清除浮動

:after 方式為空元素的公升級版,好處是不用單獨加標籤了

使用方法:

.clearfix

:after

.clearfix

/* ie6、7 專有 */

優點: 符合閉合浮動思想 , 結構語義化正確

缺點: 由於ie6-7不支援:after,使用 zoom:1相容處理,觸發 haslayout(ie7以下瀏覽器的特有屬性)。

注意: content:」.」 裡面盡量跟乙個小點,或者其他,盡量不要為空,否則再firefox 7.0前的版本會有生成空格。

3 . 使用before和after雙偽元素清除浮動

使用方法:

.clearfix

:before,

.clearfix

:after

.clearfix

:after

.clearfix

優點: **更簡潔

缺點: 由於ie6-7不支援:after,使用 zoom:1觸發 haslayout。

清除浮動的三種方式

1.clear both left right 新建乙個div,不要在原先的div上清除 2.在父類使用overflow hidden 相當於清除了元素的溢位 3.after偽類元素 content display block clear both height 0 visibility hidde...

清除浮動效果的三種方式

浮動效果 滿足我們的頁面排版要求,使豎列的盒子橫向的排列起來。負作用 因為浮動元素脫離了標準文件流,會導致父級元素無法被撐開。解決方式 清除浮動負面效果 三種方式 新增空盒子 優點 較流行 缺點 為清除浮動,頁面新增的空盒子太多,新手容易暈 用法 在浮動元素後面 同級元素 新增乙個空的div,並且定...

css清除浮動的三種方式

1 父級元素結束之前加入空div,div的樣式中有 clear both 2 父級元素設定樣式 overflow hidden 原因 為什麼加入overflow hidden即可清除浮動呢?那是因為overflow hidden屬性相當於是讓父級緊貼內容,這樣即可緊貼其物件內內容 包括使用float...