首頁 > web前端 > css教學 > 主體

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

高洛峰
發布: 2017-03-17 10:34:00
原創
1797 人瀏覽過

  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 

#  所以,呈現出下圖情況:

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

 

  當


  當

# 所有元素的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元素的深入了解clear-left

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

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!