diff options
| author | julieng <julien.gattelier@gmail.com> | 2021-09-17 20:58:15 +0200 |
|---|---|---|
| committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-10-12 07:57:33 +0200 |
| commit | 149319bb8c7b1394a443f0877c3460cd362aa815 (patch) | |
| tree | d534abb0cbc87d5e224836e9d6b888aa58564aa0 /files/fr/web/css/clear/index.html | |
| parent | eb9de0363cb273b54d3f5402bbf4e3bc03c60971 (diff) | |
| download | translated-content-149319bb8c7b1394a443f0877c3460cd362aa815.tar.gz translated-content-149319bb8c7b1394a443f0877c3460cd362aa815.tar.bz2 translated-content-149319bb8c7b1394a443f0877c3460cd362aa815.zip | |
move *.html to *.md
Diffstat (limited to 'files/fr/web/css/clear/index.html')
| -rw-r--r-- | files/fr/web/css/clear/index.html | 232 |
1 files changed, 0 insertions, 232 deletions
diff --git a/files/fr/web/css/clear/index.html b/files/fr/web/css/clear/index.html deleted file mode 100644 index 541ff870fa..0000000000 --- a/files/fr/web/css/clear/index.html +++ /dev/null @@ -1,232 +0,0 @@ ---- -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>Lorsqu'elle est appliquée aux blocs non-flottants, elle déplace <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">le bord de la bordure</a> de l'élément sous <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">le bord de la marge</a> de tous les éléments flottants concernés. Il y aura<a href="/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing"> 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/Guide/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">/* 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"><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> -</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"><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> -</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"><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> -</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> - -<p>{{Compat("css.properties.clear")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">Le modèle de boîtes</a></li> -</ul> |
