當元素的前面有浮動元素（float）時，可以清除浮動的效力。只能用在區塊（block）層元素；實際測試發現，IE6 的 SPAN 加上 clear，也有效果；但是 Firefox, Safari, Chrome 則沒效果。可設定的值有：
- none：此元素可以與前面所有浮動元素左右鄰接，此為預設值。
- left：如果此元素前有元素設為 float:left，則清除其效力。此元素接在前面所有左浮元素的下方。
- right：如果此元素前有元素設為 float:right，則清除其效力。此元素接在前面所有右浮元素的下方。
- both：清除所有 float 的效力。此元素一律接在前面所有浮動元素的下方。
- inherit：繼承父元素的特徵值。
下面的圖形設為 floar:right，所以文字的繞著圖。請參考 float 的說明。
- 風格用法：
<div style='width:300px;background:#ffdddd;color:black'><img style='float:right'
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" /> John F. Kennedy said:
ask not what your country can do for you - ask what you can do for your country. </div> - 執行結果：
John F. Kennedy said:
ask not what your country can do for you - ask what you can do for your country.
將 BR 元素加上 clear:right。
- 風格用法：
<div style='width:300px;background:#ffdddd;color:black'><img style='float:right' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" /> John F. Kennedy said: <br style='clear:right' /> ask not what your country can do for you - ask what you can do for your country. </div>
- 執行結果： John F. Kennedy said:
ask not what your country can do for you - ask what you can do for your country.
- 上例在個人電腦測試時，Chrome 失敗；但是將 width 改成 350px 又可以用了；Chrome 有點不穩定，使用時請多測試。
改為 clear:left，對 float:right 沒有效果。
- 風格用法：
<div style='width:300px;background:#ffdddd;color:black'><img style='float:right' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" /> John F. Kennedy said: <br style='clear:left'/> ask not what your country can do for you - ask what you can do for your country. </div>
- 執行結果： John F. Kennedy said:
ask not what your country can do for you - ask what you can do for your country.
:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。
- 風格用法：
<style type="text/css">
.hvr {display:block;
width: 300px;
height:250px;
border:solid 1px red;
}
.hvr:link, .hvr:visited
{background:transparent; color:white; text-decoration:none;}
.hvr:hover
{zoom:1}
.hvr:hover P
{clear:left;}
.hvr:active P
{clear:right;}
</style> <a class=hvr href='javascript:void(0)'> <img style='float:left' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" /> <p>射擊遊戲, 好玩遊戲.</p></a> - 執行結果：
射擊遊戲, 好玩遊戲.
javascript 應用。可以用 style 物件 的特徵 clear 作動態變化。
- 風格用法：
<div style='width:300px; height:300px; border:solid 1px red'><img style='float:right' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" /> <p id='test'>益智遊戲, 賽車遊戲, 小遊戲.</p></div><script type='text/javascript'>
function toggleCSS(id, pty, v1, v2, ms)
{
var os=document.getElementById(id).style;
os[pty]= (os[pty] == v1 ) ? v2 : v1;
setTimeout('toggleCSS("'+id+'","'+pty+'","'+v1+'","'+v2+'",'+ms+')', ms);
}
toggleCSS("test", "clear", "none", "right", 1000);
</script> - 執行結果：
益智遊戲, 賽車遊戲, 小遊戲.
