2008/11/12

clear

clear | float
clear

當元素的前面有浮動元素(float)時,可以清除浮動的效力。只能用在區塊(block)層元素;實際測試發現,IE6 的 SPAN 加上 clear,也有效果;但是 Firefox, Safari, Chrome 則沒效果。可設定的值有:

  1. none:此元素可以與前面所有浮動元素左右鄰接,此為預設值。
  2. left:如果此元素前有元素設為 float:left,則清除其效力。此元素接在前面所有左浮元素的下方。
  3. right:如果此元素前有元素設為 float:right,則清除其效力。此元素接在前面所有右浮元素的下方。
  4. both:清除所有 float 的效力。此元素一律接在前面所有浮動元素的下方。
  5. inherit:繼承父元素的特徵值。

下面的圖形設為 floar:right,所以文字的繞著圖。請參考 float 的說明。

BR 元素加上 clear:right

  • 上例在個人電腦測試時,Chrome 失敗;但是將 width 改成 350px 又可以用了;Chrome 有點不穩定,使用時請多測試。

改為 clear:left,對 float:right 沒有效果。

:HOVER, :ACTIVE 的應用。使用時要注意,在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。

javascript 應用。可以用 style 物件 的特徵 clear 作動態變化。