Propriété CSS clear
La propriété clear est directement liée aux flottants. La propriété clear est utilisée pour spécifier si un élément doit se trouver à côté d'éléments flottants ou en dessous d'eux (clear).
Nous pouvons appliquer la propriété clear aux éléments flottants et non flottants. Cette propriété accepte des valeurs telles que none, left, right, both, initial et inherit. none est la valeur par défaut. Elle autorise les éléments flottants des deux côtés. La valeur left n'autorise aucun élément flottant sur le côté gauche. La valeur right n'autorise aucun élément flottant sur le côté droit. La valeur both n'autorise aucun élément flottant ni sur le côté gauche ni sur le côté droit.
Remarque : La propriété clear n'affecte que les éléments en flux de blocs normal et ne fonctionne pas avec les mises en page Flexbox ou Grid.
| Initial Value | none |
|---|---|
| Applies to | Block-level elements. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS1 |
| DOM Syntax | element.style.clear = "both"; |
Syntaxe
Syntaxe de la propriété CSS clear
clear: none | left | right | both | initial | inherit;Exemple de la propriété clear :
Exemple de la propriété CSS clear avec la valeur left
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
float: left;
background: #ccc
}
.clear {
clear: left;
}
</style>
</head>
<body>
<img src="https://fr.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" />
<p class="clear">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</body>
</html>Résultat
Exemple de la propriété clear avec la valeur "right" :
Exemple de la propriété CSS clear avec la valeur right
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
float: right;
background: #ccc
}
.clear {
clear: right;
}
</style>
</head>
<body>
<img src="https://fr.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" />
<p class="clear">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</body>
</html>Exemple de la propriété clear avec la valeur "both" :
Exemple de la propriété CSS clear avec la valeur both
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
float: right;
background: #CCC;
}
p.clear {
clear: both;
}
</style>
</head>
<body>
<img src="https://fr.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" width="220" height="80" />
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p class="clear">
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</body>
</html>Valeurs
| Value | Description |
|---|---|
| none | Autorise les éléments flottants des deux côtés. C'est la valeur par défaut de cette propriété. |
| left | Indique que les éléments flottants ne sont pas autorisés sur le côté gauche. |
| right | Indique que les éléments flottants ne sont pas autorisés sur le côté droit. |
| both | Indique que les éléments flottants ne sont autorisés sur aucun des deux côtés. |
| initial | Fait utiliser à la propriété sa valeur par défaut. |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Que fait la propriété 'clear' en CSS ?