path: root/files/fr/web/css/clear/index.html

---
title: clear
slug: Web/CSS/clear
tags:
  - CSS
  - Propriété
  - Reference
translation_of: Web/CSS/clear
---
<div>{{CSSRef}}</div>

<p>La propriété <strong><code>clear</code></strong> indique si un élément peut être situé à côté d'éléments <a href="/fr/docs/Web/CSS/float">flottants</a> qui le précèdent ou s'il doit être déplacé vers le bas pour être en dessous de ces éléments. La propriété <code>clear</code> s'applique aux éléments flottants comme aux éléments non-flottants.</p>

<div>{{EmbedInteractiveExample("pages/css/clear.html")}}</div>

<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>

<p>Lorsqu'elle est appliquée aux blocs non-flottants, elle déplace <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">le bord de la bordure</a> de l'élément sous <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">le bord de la marge</a> de tous les éléments flottants concernés. Il y aura<a href="/fr/docs/Web/CSS/Fusion_des_marges"> fusion des marges (<em>margin collapsing</em>)</a> verticales entre l'élément flottant et le bloc non-flottant mais pas entre les élément flottants.</p>

<p>Lorsqu'elle est appliquée aux éléments flottants, elle déplace <a href="/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte">le bord de la marge</a> de l'élément sous <a href="/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte">le bord de la marge</a> de tous les éléments flottants concernés. Cela impacte la position des éléments flottants suivants car ceux-ci ne peuvent pas être situés plus haut que les éléments flottants qui les précèdent.</p>

<p>Les éléments flottants qui sont dégagés sont les éléments flottants précédant l'élément ciblé, au sein de du <a href="/fr/docs/Web/CSS/Block_formatting_context">même contexte de formatage</a>.</p>

<div class="note">
<p><strong>Note : </strong>Si un élément ne contient que des éléments flottants, sa hauteur sera nulle. Si on souhaite redimensionner l'élément afin qu'il contienne tous les éléments flottants à l'intérieur, on peut faire flotter ce conteneur ou utiliser <code>clear</code> sur un pseudo-élément remplacé {{cssxref("::after")}}.</p>

<pre class="brush: css">#conteneur::after {
   content: "";
   display: block;
   clear: both;
}
</pre>
</div>

<h2 id="Syntaxe">Syntaxe</h2>

<pre class="brush: css:no-line-numbers">/* 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: unset;
</pre>

<h3 id="Valeurs">Valeurs</h3>

<dl>
 <dt><code>none</code></dt>
 <dd>Un mot-clé qui indique que l'élément n'est pas déplacé vers le bas pour dégager le flottement.</dd>
 <dt><code>left</code></dt>
 <dd>Un mot-clé qui indique que l'élément est déplacé vers le bas afin de dégager les flottements à gauche.</dd>
 <dt><code>right</code></dt>
 <dd>Un mot-clé qui indique que l'élément est déplacé vers le bas afin de dégager les flottements à droite.</dd>
 <dt><code>both</code></dt>
 <dd>Un mot-clé qui indique que l'élément est déplacé vers le bas afin de dégager les flottements à gauche et à droite.</dd>
 <dt><code>inline-start</code></dt>
 <dd>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 (<em>LTR</em> pour <em>left to right</em>) et dégage à droite pour les scripts de droite à gauche (<em>RTL</em> pour <em>droite à gauche</em>).</dd>
 <dt><code>inline-end</code></dt>
 <dd>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 (<em>LTR</em> pour <em>left to right</em>) et dégage à gauche pour les scripts de droite à gauche (<em>RTL</em> pour <em>droite à gauche</em>).</dd>
</dl>

<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>

{{csssyntax}}

<h2 id="Exemples">Exemples</h2>

<h3 id="clear_left"><code>clear: left</code></h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;div class="wrapper"&gt;
  &lt;p class="black"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
  &lt;p class="red"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/p&gt;
  &lt;p class="left"&gt;Ce paragraphe est dégagé à gauche.&lt;/p&gt;
&lt;/div&gt;
</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css">.wrapper{
  border:1px solid black;
  padding:10px;
}
.left {
  border: 1px solid black;
  clear: left;
}
.black {
  float: left;
  margin: 0;
  background-color: black;
  color: #fff;
  width: 20%;
}
.red {
  float: left;
  margin: 0;
  background-color: red;
  width:20%;
}
p {
  width: 50%;
}
</pre>

<p>{{EmbedLiveSample('clear_left','100%','250')}}</p>

<h3 id="clear_right"><code>clear: right</code></h3>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html">&lt;div class="wrapper"&gt;
  &lt;p class="black"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
  &lt;p class="red"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/p&gt;
  &lt;p class="right"&gt;Ce paragraphe est dégagé à droite.&lt;/p&gt;
&lt;/div&gt;
</pre>

<h4 id="CSS_2">CSS</h4>

<pre class="brush: css">.wrapper{
  border:1px solid black;
  padding:10px;
}
.right {
  border: 1px solid black;
  clear: right;
}
.black {
  float: right;
  margin: 0;
  background-color: black;
  color: #fff;
  width:20%;
}
.red {
  float: right;
  margin: 0;
  background-color: red;
  width:20%;
}
p {
  width: 50%;
}</pre>

<p>{{EmbedLiveSample('clear_right','100%','250')}}</p>

<h3 id="clear_both"><code>clear: both</code></h3>

<h4 id="HTML_3">HTML</h4>

<pre class="brush: html">&lt;div class="wrapper"&gt;
  &lt;p class="black"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.&lt;/p&gt;
  &lt;p class="red"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
  &lt;p class="both"&gt;Ce paragraphe est dégagé de chaque côté.&lt;/p&gt;
&lt;/div&gt;
</pre>

<h4 id="CSS_3">CSS</h4>

<pre class="brush: css">.wrapper{
  border:1px solid black;
  padding:10px;
}
.both {
  border: 1px solid black;
  clear: both;
}
.black {
  float: left;
  margin: 0;
  background-color: black;
  color: #fff;
  width:20%;
}
.red {
  float: right;
  margin: 0;
  background-color: red;
  width:20%;
}
p {
  width: 45%;
}</pre>

<p>{{EmbedLiveSample('clear_both','100%','300')}}</p>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}</td>
   <td>{{Spec2('CSS Logical Properties')}}</td>
   <td>Ajout des valeurs <code>inline-start</code> et <code>inline-end</code></td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'visuren.html#flow-control', 'clear')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Pas de modification significative, clarification de certains détails.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#clear', 'clear')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>

<p>{{Compat("css.properties.clear")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">Le modèle de boîtes</a></li>
</ul>