clear
Baseline
Widely available
*
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
La propriété CSS clear définit si un élément doit être déplacé sous les éléments flottants qui le précèdent (dégagement). La propriété clear s'applique aux éléments flottants comme aux éléments non flottants.
Exemple interactif
clear: none;
clear: left;
clear: right;
clear: both;
<section class="default-example" id="default-example">
<div class="example-container">
<div class="floated-left">Gauche</div>
<div class="floated-right">Droite</div>
<div class="transition-all" id="example-element">
Autant de boue dans les rues que si les eaux venaient à peine de se
retirer de la surface de la terre, et il ne serait pas étonnant de croiser
un Megalosaurus, long d'une douzaine de mètres, se dandinant comme un
lézard éléphantin dans Holborn Hill.
</div>
</div>
</section>
.example-container {
border: 1px solid #c5c5c5;
padding: 0.75em;
text-align: left;
line-height: normal;
}
.floated-left {
border: solid 10px #ffc129;
background-color: rgb(81 81 81 / 0.6);
padding: 1em;
float: left;
}
.floated-right {
border: solid 10px #ffc129;
background-color: rgb(81 81 81 / 0.6);
padding: 1em;
float: right;
height: 150px;
}
Syntaxe
/* Valeurs avec mot-clé */
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;
/* Valeurs globales */
clear: inherit;
clear: initial;
clear: revert;
clear: revert-layer;
clear: unset;
Valeurs
none-
Un mot-clé qui indique que l'élément n'est pas déplacé vers le bas pour dégager le flottement.
left-
Un mot-clé qui indique que l'élément est déplacé vers le bas afin de dégager les flottements à gauche.
right-
Un mot-clé qui indique que l'élément est déplacé vers le bas afin de dégager les flottements à droite.
both-
Un mot-clé qui indique que l'élément est déplacé vers le bas afin de dégager les flottements à gauche et à droite.
inline-start-
Un mot-clé qui indique que l'élément est déplacé vers le bas pour dégager le contenu vers le début du bloc englobant. Autrement dit, cela dégage à gauche pour les scripts de gauche à droite (LTR pour left to right) et dégage à droite pour les scripts de droite à gauche (RTL pour droite à gauche).
inline-end-
Un mot-clé qui indique que l'élément est déplacé vers le bas pour dégager le contenu du côté de la fin du bloc englobant. Autrement dit, cela dégage à droite pour les scripts de gauche à droite (LTR pour left to right) et dégage à gauche pour les scripts de droite à gauche (RTL pour droite à gauche).
Description
Lorsqu'elle est appliquée aux blocs non flottants, elle déplace le bord de la bordure de l'élément vers le bas jusqu'à ce qu'il soit sous le bord de la marge de tous les flottants concernés. La marge supérieure du bloc non flottant fusionne.
Les marges verticales entre deux éléments flottants, en revanche, ne fusionnent pas. Lorsqu'elle est appliquée aux éléments flottants, le bord de la marge de l'élément du bas est déplacé sous le bord de la marge de tous les flottants concernés. Cela affecte la position des flottants suivants, car ils ne peuvent pas être positionnés plus haut que les flottants précédents.
Les flottants concernés par le dégagement sont les flottants précédents dans le même contexte de formatage de bloc.
Définition formelle
| Valeur initiale | none |
|---|---|
| Applicabilité | éléments de type bloc |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
Syntaxe formelle
clear =
inline-start |
inline-end |
block-start |
block-end |
left |
right |
top |
bottom |
both-inline |
both-block |
both |
none
Exemples
clear: left
HTML
<div class="wrapper">
<p class="black">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
diam. Duis mattis varius dui. Suspendisse eget dolor.
</p>
<p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="left">Ce paragraphe est dégagé à gauche.</p>
</div>
CSS
.wrapper {
border: 1px solid black;
padding: 10px;
}
.left {
border: 1px solid black;
clear: left;
}
.black {
float: left;
margin: 0;
background-color: black;
color: white;
width: 20%;
}
.red {
float: left;
margin: 0;
background-color: pink;
width: 20%;
}
p {
width: 50%;
}
clear: right
HTML
<div class="wrapper">
<p class="black">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
diam. Duis mattis varius dui. Suspendisse eget dolor.
</p>
<p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="right">Ce paragraphe est dégagé à droite.</p>
</div>
CSS
.wrapper {
border: 1px solid black;
padding: 10px;
}
.right {
border: 1px solid black;
clear: right;
}
.black {
float: right;
margin: 0;
background-color: black;
color: white;
width: 20%;
}
.red {
float: right;
margin: 0;
background-color: pink;
width: 20%;
}
p {
width: 50%;
}
clear: both
HTML
<div class="wrapper">
<p class="black">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus
ac dui.
</p>
<p class="red">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
diam. Duis mattis varius dui. Suspendisse eget dolor.
</p>
<p class="both">Ce paragraphe est dégagé de chaque côté.</p>
</div>
CSS
.wrapper {
border: 1px solid black;
padding: 10px;
}
.both {
border: 1px solid black;
clear: both;
}
.black {
float: left;
margin: 0;
background-color: black;
color: white;
width: 20%;
}
.red {
float: right;
margin: 0;
background-color: pink;
width: 20%;
}
p {
width: 45%;
}
Spécifications
| Specification |
|---|
| Cascading Style Sheets Level 2 # propdef-clear |
| CSS Logical Properties and Values Module Level 1 # float-clear |