clear：left;表示左側不能有浮動元素。 clear：right;表示右側不能有浮動元素。 clear：both;表示左右兩側都不能有浮動元素。 但在使用時，還得考慮css優先順序問題。相同類型選擇器制定的樣式，在樣式表文件中，越靠後的優先順序越高 。 當所有元素的clear屬性都設為right時 ...
clear：left;表示左側不能有浮動元素。
clear：right;表示右側不能有浮動元素。
clear：both;表示左右兩側都不能有浮動元素。
但在使用時，還得考慮css優先順序問題。相同類型選擇器制定的樣式，在樣式表文件中，越靠後的優先順序越高 。
當所有元素的clear屬性都設為right時，由於優先順序的原因，並不是所想的那樣：右側沒有浮動元素，而是右側出現了浮動元素。
比如下麵的代碼：
<html> <head> <style type="text/css"> .div1 { height:40px; width:40px; background-color:red; position:releative; float:left; clear:right; } .div2 { height:40px; width:40px; background-color:green; position:relative; float:left; clear:right; } .div3 { height:40px; width:40px; background-color:yellow; position:relative; float:left; clear:right; } .div4 { height:40px; width:40px; background-color:black; position:relative; float:left; clear:right; } .div5 { height:40px; width:40px; background-color:blue; position:relative; float:left; clear:right; } </style> </head> <body> <div class="div1"> </div> <div class="div2"> </div> <div class="div3"> </div> <div class="div4"> </div> <div class="div5"> </div> </body> </html>clear-right
其中：class優先順序關係： div5>div4>div3>div2>div1
所以，呈現出下圖情況：
當所有元素的clear屬性都設為left時，由於優先順序的原因，並不是所想的那樣：右側可以有浮動元素，而是右側不能出現浮動元素。
比如下麵的代碼：
<html> <head> <style type="text/css"> .div1 { height:40px; width:40px; background-color:red; position:releative; float:left; clear:left; } .div2 { height:40px; width:40px; background-color:green; position:relative; float:left; clear:left; } .div3 { height:40px; width:40px; background-color:yellow; position:relative; float:left; clear:left; } .div4 { height:40px; width:40px; background-color:black; position:relative; float:left; clear:left; } .div5 { height:40px; width:40px; background-color:blue; position:relative; float:left; clear:left; } </style> </head> <body> <div class="div1"> </div> <div class="div2"> </div> <div class="div3"> </div> <div class="div4"> </div> <div class="div5"> </div> </body> </html>clear-left
其中：class優先順序關係： div5>div4>div3>div2>div1 。
所以，呈現出下圖情況：
我有時偶爾還是會繞暈。。反正，瞭解了css優先順序問題，就容易理解了。
