Comment fonctionne clear en CSS ?

Remarque : Je viens de traduire le texte ci-dessous et de le publier ici. Les références sont à la fin de cet article.

La propriété CSS clear fonctionne par rapport à la propriété CSS float. Il définit si un élément doit être déplacé en dessous des éléments « flottants » qui le précèdent.

Comprenons cela à l'aide d'un exemple.

Nous considérerons quatre blocs rouge, jaune, bleu et vert qui seront ajoutés les uns après les autres et tous seront placés au même niveau.

Ensuite, nous ferons "flotter" chaque élément vers la "gauche" un par un, ce qui signifie qu'ils seront déplacés d'un niveau au-dessus de leur position initiale. Cela permettra à d'autres éléments « non flottants » de s'enrouler autour de l'élément flottant.

Remarque - Le bloc suivant occupera la position du bloc flottant, il n'est donc pas visible. Lorsqu'on change la dimension du bloc suivant, on observe qu'il est recouvert du bloc flottant qui est présent une couche au-dessus.

Après cela, nous appliquerons clear:left au bloc bleu, ce qui signifie qu'aucun élément ne flottera à gauche du bloc bleu.

À l'aide de la propriété CSS clear, nous pouvons spécifier quel côté des éléments flottants ne peut pas effectuer le float. Il définit ou renvoie la position par rapport aux objets flottants.

Valeurs acceptées dans la propriété CSS clear

.element {
    clear: none;
    clear: left;
    clear: right;
    clear: both;
    clear: inline-start;
    clear: inline-end;

    clear: inherit;
    clear: initial;
    clear: revert;
    clear: revert-layer;
    clear: unset;
}

Vous trouverez ci-dessous le code des exemples présentés ci-dessus :

HTML :

<div class="wrapper">
    <div class="red block"></div>
    <div class="yellow block"></div>
    <div class="blue block"></div>
    <div class="green block"></div>
</div>

CSS :

.wrapper{
    height:100vh;
    padding: 30px;
    text:center;
    background: #3A3B3C;
}
.block {
    height:40px;
    width:40px;
    border-radius: 4px;
}
.red {
    background: #CB6D51;
    float:left;
}
.yellow {
    background:#FBE7A1;
    float: left;
}
.blue {
    background: #3090C7;
    float: left;
    clear:both;
}
.green {
    background: #2E8B57;
    float: left;
}

J'ai essayé d'expliquer le fonctionnement de la propriété CSS clear à l'aide d'un exemple de base pour une meilleure compréhension. Veuillez partager vos exemples et n'hésitez pas à les ajouter à ce message ?.

Bon apprentissage !??‍?

Source

Article rédigé par Jasmin Virdi.

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!