語法:
選擇器
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浮動,所以兩個黑色盒子產生了浮動,導致紅色盒子不能撐開,這樣浮動就產生了...