深入學習CSS clear屬性用法
本文和大家重點討論一下CSS clear屬性的用法,clear 屬性定義了元素的哪邊上不允許出現浮動元素。
CSS clear屬性
定義和用法
clear 屬性規定元素的哪一側不允許其他浮動元素。
說明
clear 屬性定義了元素的哪邊上不允許出現浮動元素。在 CSS1 和 CSS2 中,這是通過自動為清除元素(即設置了 clear 屬性的元素)增加上外邊距實現的。在 CSS2.1 中,會在元素上外邊距之上增加清除空間,而外邊距本身并不改變。不論哪一種改變,最終結果都一樣,如果聲明為左邊或右邊清除,會使元素的上外邊框邊界剛好在該邊上浮動元素的下外邊距邊界之下。
實例
圖像的左側和右側均不允許出現浮動元素:
- img
- {
- float:left;
- clear:both;
- }
瀏覽器支持
所有主流瀏覽器都支持 clear 屬性。
注釋:任何版本的 Internet Explorer (包括 IE8)都不支持屬性值 "inherit"。
可能的值
TIY 實例
- <html>
- <head>
- <style type="text/css"> img
- {
- float:left; clear:both;
- }
- </style>
- </head>
- <body> <img src="www.68tt.com/i/eg_smile.gif" />
- <img src="/i/eg_smile.gif" />
- </body>
- </html>
本例演示如何使用清除元素側面的浮動元素。
【編輯推薦】