css清除浮動

2021-10-17 19:44:35 字數 1319 閱讀 4485

語法:

選擇器
left表示不允許左側有浮動元素;

right表示不允許右側有浮動元素;

both表示清除兩端的浮動影響;

實際工作中幾乎只用clear:both;

1.額外標籤法:

在浮動標籤末尾新增乙個空的標籤。

例如:

>

div li

.clear

.box

.box2

.charactor1

.charactor2

style

>

>

class

="box"

>

class

="charactor1"

>

1li>

class

="charactor2"

>

2li>

class

="clear"

>

li>

div>

class

="box2"

>

div>

body

>

執行結果:

優點:通俗易懂,書寫方便;

缺點:新增許多標籤,結構混亂;

2.給父級新增overflow:

只需要找到父級標籤的類,在類中新增:

overflow:hidden;
即可

>

div li

.box

.box2

.charactor1

.charactor2

style

>

>

class

="box"

>

class

="charactor1"

>

1li>

class

="charactor2"

>

2li>

div>

class

="box2"

>

div>

body

>

執行結果:

還有兩種其他方法:

(1)after偽元素法

(2)雙偽元素清除浮動

這兩種方法僅限了解接可。

CSS清除浮動 清除float浮動

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

CSS清除浮動 清除float浮動

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

CSS清除浮動 清除float浮動

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