Compréhension approfondie de l'élément clear en CSS

Clair : gauche ; signifie qu'il ne peut y avoir aucun élément flottant à gauche.

Clair : à droite ; signifie qu'il ne peut y avoir aucun élément flottant sur le côté droit.
Clair : les deux ; signifie qu'il ne peut y avoir aucun élément flottant sur les côtés gauche et droit.

Mais lorsque vous l'utilisez, vous devez considérer le problème de priorité CSS. Pour les styles spécifiés par des sélecteurs du même type, les derniers dans le fichier de feuille de style ont une priorité plus élevée.

　Lorsque l'attribut clear de tous les éléments est défini à droite, pour des raisons de priorité, ce n'est pas comme prévu : il n'y a pas d'élément flottant à droite, mais un élément flottant apparaît à droite côté.

Par exemple, le code suivant :

<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

Où : class Relation de priorité : p5>p4>p3>p2>p1

Par conséquent, la situation suivante est présentée :

>Lorsque l'attribut clear de tous les éléments est défini sur gauche, en raison de la priorité Pour certaines raisons, ce n'est pas comme prévu : il peut y avoir des éléments flottants sur le côté droit, mais les éléments flottants ne peuvent pas apparaître sur le côté droit.

Par exemple, le code suivant :

clear-left

Où : classe Relation de priorité : p5>p4>p3>p2>p1.

<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>

Par conséquent, la situation présentée ci-dessous :

J'ai encore parfois des vertiges. . Quoi qu'il en soit, une fois que vous aurez compris le problème de priorité CSS, il sera facile à comprendre.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!