css 清除浮動方法

2021-10-11 11:43:18 字數 691 閱讀 6734

1、額外標籤法(隔牆法)

style

="clear

: both

">

div>

2、父級 overflow: hidden

style

="overflow

: hidden

">

div>

3、父級 after 偽元素

.clearfix::after

.clearfix

4、父級雙偽元素

.clearfix::before, .clearfix::after 

.clearfix::after

.clearfix

清除浮動的方式

優點缺點

額外標籤法(隔牆法)

通俗易懂、書寫方便

新增許多無意義的標籤,結構化較差

父級 overflow: hidden

書寫簡單

溢位隱藏

父級 after 偽元素

結構語義化正確

ie6、7不支援:after,相容性問題

父級雙偽元素

結構語義化正確

ie6、7不支援:after,相容性問題

css清除浮動方法

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

css解決浮動,清除浮動方法

2.clear both清除浮動 3.父級div定義 overflow hidden 總結假設了有三個盒子物件,乙個父級裡包含了兩個子級,子級乙個使用了float left屬性,另外乙個子級使用float right屬性。同時設定div css border,父級css邊框顏色為紅色,兩個子級邊框顏...

CSS清除浮動方法集合

css清除浮動方法集合 一般浮動是什麼情況呢?一般是乙個盒子裡使用了css float浮動屬性,導致父級物件盒子不能被撐開,這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內,因為對兩個黑色盒子使用了float浮動,所以兩個黑色盒子產生了浮動,導致紅色盒子不...