Home  >  Article  >  Web Front-end  >  In-depth understanding of the clear element in css

In-depth understanding of the clear element in css

高洛峰
高洛峰Original
2017-03-17 10:34:001801browse

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:

In-depth understanding of the clear element in css

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:

In-depth understanding of the clear element in css

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn