clear:left;表示左側不能有浮動元素。
clear:right;表示右邊不能有浮動元素。
clear:both;表示左右兩側都不能有浮動元素。
但在使用時,還得考慮css優先問題。相同類型選擇器所製定的樣式,在樣式表檔中,越靠後的優先權越高 。
當所有元素的clear屬性都設為right時,由於優先順序的原因,並不是所想的那樣:右側沒有浮動元素,而是右側出現了浮動元素。
例如下面的程式碼:
<style> .p1{height:40px;width:40px;background-color:red;position:releative;float:left;clear:right; }.p2{height:40px;width:40px;background-color:green;position:relative;float:left;clear:right; }.p3{height:40px;width:40px;background-color:yellow;position:relative;float:left;clear:right; }.p4{height:40px;width:40px;background-color:black;position:relative;float:left;clear:right; }.p5{height:40px;width:40px;background-color:blue;position:relative;float:left;clear:right; }</style> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p>
clear-right
其中:class優先權關係: p5>p4>p3>p2>p1
# 所以,呈現出下圖情況:
當
當
# 所有元素的clear屬性都設為left時,由於優先權的原因,並不是所想的那樣:右側可以有浮動元素,而是右側不能出現浮動元素。
例如下面的程式碼:
<style> .p1{height:40px;width:40px;background-color:red;position:releative;float:left;clear:left; }.p2{height:40px;width:40px;background-color:green;position:relative;float:left;clear:left; }.p3{height:40px;width:40px;background-color:yellow;position:relative;float:left;clear:left; }.p4{height:40px;width:40px;background-color:black;position:relative;float:left;clear:left; }.p5{height:40px;width:40px;background-color:blue;position:relative;float:left;clear:left; }</style> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p>
以上是關於css中clear元素的深入了解的詳細內容。更多資訊請關注PHP中文網其他相關文章!