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>
其中：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>
其中：class優先級關系： div5>div4>div3>div2>div1 。
所以，呈現出下圖情況：
我有時偶爾還是會繞暈。。反正，了解了css優先級問題，就容易理解了。
【 微信掃一掃 】
