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

In-depth understanding of the clear element in css

高洛峰
Release: 2017-03-17 10:34:00
Original
1823 people have browsed it

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>


Copy after login

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>


Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template