Vertieftes Verständnis des klaren Elements in CSS

Clear: left; bedeutet, dass es auf der linken Seite keine schwebenden Elemente geben darf.

Klar: rechts; bedeutet, dass auf der rechten Seite keine schwebenden Elemente vorhanden sein dürfen.
Klar: beides; bedeutet, dass es auf der linken und rechten Seite keine schwebenden Elemente geben darf.

Bei der Verwendung müssen Sie jedoch das Problem der CSS-Priorität berücksichtigen. Bei Stilen, die durch Selektoren desselben Typs angegeben werden, haben die späteren Stile in der Stylesheet-Datei eine höhere Priorität.

　Wenn das Clear-Attribut aller Elemente aus Prioritätsgründen auf rechts gesetzt ist, ist es nicht wie erwartet: Es gibt kein schwebendes Element auf der rechten Seite, aber ein schwebendes Element erscheint auf der rechten Seite Seite.

Zum Beispiel der folgende 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

Wo : Klassenprioritätsbeziehung: p5>p4>p3>p2>p1

Daher liegt die folgende Situation vor:

　

　Wenn das Clear-Attribut aller Elemente aus Prioritätsgründen auf links gesetzt ist, ist es nicht wie erwartet: Es können schwebende Elemente auf der rechten Seite vorhanden sein, aber schwebende Elemente können nicht auf der rechten Seite erscheinen.

Zum Beispiel der folgende 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

Wo : Klassenprioritätsbeziehung: p5>p4>p3>p2>p1.

Daher die unten dargestellte Situation:

Mir wird immer noch manchmal schwindelig. . Wie auch immer, es ist leicht zu verstehen, wenn man erst einmal das Problem der CSS-Priorität verstanden hat.

Das obige ist der detaillierte Inhalt vonVertieftes Verständnis des klaren Elements in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!