CSS clear 用法介紹

clear 是用來清除某一元素的側邊浮動元素,假設兩個 div 區塊使用了浮動(CSS float)而併排在一起,如果要讓這兩個元素不要併排在一起,則可以使用 clear 來宣告清除 CSS float 浮動效果,以下範例圖片所示。



左邊藍色區塊與右邊綠色的區塊,我們使用了 float 讓左右兩的區塊可以水平排在一起,如果你不需要綠色區塊浮動在藍色區塊的右邊,這時候可以在綠色區塊的 style 加上 clear:left 這樣的寫法,意思是清空綠色區塊左邊的浮動區塊,呈現效果就會像下方這樣。



當綠色區塊用 clear 清除掉左邊的浮動區塊之後,等於是讓 float:left 失效,就自然而然的往下方排列囉!

CSS clear 語法範例
box {
 float:left;
 clear:left;
}
此範例的意思是清除 box 區塊左方的浮動元素。

CSS clear 可以的值有 left(清除左邊浮動區塊)、right(清除右邊浮動區塊)、both(清除兩邊浮動區塊)、none(預設就是這個,兩邊都可以有浮動區塊)最後還有 inherit(繼承),但是因為 IE 支援度的原因,所以我沒在使用 inherit 這個值。

延伸閱讀
CSS float 浮動元素
CSS DIV 區塊標籤的使用教學
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012 Englsih version
PHP Smarty MySQL JQuery Apache W3C