In-depth understanding of the clear element in css

Clear: left; means there can be no floating elements on the left.

Clear: right; means there can be no floating elements on the right side.
Clear: both; means there can be no floating elements on the left and right sides.

But when using it, you have to consider the CSS priority issue. For styles specified by selectors of the same type, the later ones in the style sheet file have a higher priority.

　When the clear attribute of all elements is set to right, due to priority reasons, it is not as expected: there is no floating element on the right side, but a floating element appears on the right side.

For example, the following code:

<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

Among them: class priority Relationship: p5>p4>p3>p2>p1

Therefore, the following situation is presented:

When the clear attribute of all elements is set to left, due to priority reasons, it is not as expected: there can be floating elements on the right side, but no floating elements can appear on the right side.

For example, the following code:

<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

Among them: class priority Relationship: p5>p4>p3>p2>p1 .

Therefore, the situation shown below is:

I still get dizzy sometimes. . Anyway, once you understand the CSS priority issue, it will be easy to understand.

The above is the detailed content of In-depth understanding of the clear element in css. For more information, please follow other related articles on the PHP Chinese website!