在CSS中,清除浮動都是在設置左浮動或者右浮動之後的元素內設置。
語法:
clear:取值;
說明:
clear屬性取值如下:
使用clear屬性清除浮動,我們比較少使用“clear:left;”或者“clear:right;”來判斷是清除左浮動,還是清除右浮動。我們往往直截了當地使用“clear:both;”來把所有浮動清除,還省事。也就是說,我們在這一節只要學會“clear:both;”這一個屬性就足夠啦。
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS清除浮動</title> <style type="text/css"> /*定義父元素樣式*/ #father { width:400px; background-color:#0C6A9D; border:1px solid silver; } /*定義子元素樣式*/ #father div { padding:10px; margin:15px; border:2px dashed red; background-color:#FCD568; } /*定義文本樣式*/ #father p { margin:15px; border:2px dashed red; background-color:#FCD568; } #son1 { /*這裡設置son1的浮動方式*/ float:left; } #son2 { /*這裡設置son2的浮動方式*/ float:left; } #son3 { /*這裡設置son3的浮動方式*/ float:right; } </style> </head> <body> <div id="father"> <div id="son1">box1</div> <div id="son2">box2</div> <div id="son3">box3</div> <p>這裡是浮動框外圍的文字,這裡是浮動框外圍的文字,這裡是浮動框外圍的文字,這裡是浮動框外圍的文字,這裡是浮動框外圍的文字,這裡是浮動框外圍的文字,</p> </div> </body> </html>
在浏覽器預覽效果如下:
我們添加如下CSS樣式:
p{clear:both;}
這個時候在浏覽器預覽效果如下:
分析:
由於p元素清除了浮動,所以p元素的前一個元素產生的浮動就不會對後續元素產生影響,因此p元素的文本不會環繞在浮動元素的周圍。
除了使用clear屬性來清除浮動,還可以采用“overflow:hidden;”來清除浮動,在這裡大家只需要了解一下即可。在“CSS進階教程”,我們會詳細講解清除浮動都有哪些方法。
對於CSS浮動、CSS定位這些,你必須要通過實踐才能真正掌握( 學習網會不斷改善,給你提供實踐題目)。實踐再回來看定義,就會很清楚了。