關於css中clear元素的深入了解

　　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>

clear-left

###　　其中：class優先權關係： p5>p4>p3>p2>p1 。 ######　　所以，呈現出下圖情況：################　　我有時偶爾還是會繞暈。 。反正，了解css優先問題，就容易理解了。 ###

以上是關於css中clear元素的深入了解的詳細內容。更多資訊請關注PHP中文網其他相關文章！