CSSのclear要素を深く理解する

clear:left; は、左側に浮動要素が存在できないことを意味します。

clear:right; は、右側に浮動要素が存在できないことを意味します。
clear: 両方; 左側と右側に浮動要素が存在できないことを意味します。

ただし、使用する場合は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

その中に: クラスの優先関係: 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

その中に: クラスの優先順位関係: p5>p4>p3>p2>p1 。

ということで、下の写真がその状況です

今でもたまにめまいがすることがあります。 。とにかく、CSSの優先順位の問題を理解すれば、理解するのは簡単です。

以上がCSSのclear要素を深く理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。