在css中,clear屬性用于清除元素的浮動效果,該屬性可指定段落的左側(cè)或右側(cè)浮動元素的效果;默認該屬性的值為none,表示允許浮動元素出現(xiàn)在兩側(cè),也可設(shè)置元素的左側(cè)、右側(cè)或左右兩側(cè)不能有浮動元素,語法為“元素{clear:屬性值;}”。
本教程操作環(huán)境:windows10系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
clear在css中的用法是什么
css中clear的作用是清除元素的浮動效果。
clear屬性指定段落的左側(cè)或右側(cè)不允許浮動的元素。
在 CSS1 和 CSS2 中,這是通過自動為清除元素(即設(shè)置了 clear 屬性的元素)增加上外邊距實現(xiàn)的。在 CSS2.1 中,會在元素上外邊距之上增加清除空間,而外邊距本身并不改變。
不論哪一種改變,最終結(jié)果都一樣,如果聲明為左邊或右邊清除,會使元素的上外邊框邊界剛好在該邊上浮動元素的下外邊距邊界之下。
clear屬性值:
-
eft 在左側(cè)不允許浮動元素。
-
right 在右側(cè)不允許浮動元素。
-
both 在左右兩側(cè)均不允許浮動元素。
-
none 默認值。允許浮動元素出現(xiàn)在兩側(cè)。
-
inherit 規(guī)定應(yīng)該從父元素繼承 clear 屬性的值。
示例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>123</title> <style> img { float:left; } p.clear { clear:both; } </style> </head> <body> <img src="logocss.gif" width="95" height="84" /> <p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p> <p class="clear">This is also some text. This is also some text. This is also some text. This is also some text. This is also some text. This is also some text.</p> </body> </html>
輸出結(jié)果:
(學(xué)習(xí)視頻分享:css視頻教程)