aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/css/clear/index.html
diff options
context:
space:
mode:
authorjulieng <julien.gattelier@gmail.com>2021-09-17 20:58:15 +0200
committerSphinxKnight <SphinxKnight@users.noreply.github.com>2021-10-12 07:57:33 +0200
commit149319bb8c7b1394a443f0877c3460cd362aa815 (patch)
treed534abb0cbc87d5e224836e9d6b888aa58564aa0 /files/fr/web/css/clear/index.html
parenteb9de0363cb273b54d3f5402bbf4e3bc03c60971 (diff)
downloadtranslated-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.html232
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">&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>
-
-<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>