« Modèle:Clr/Documentation » : différence entre les versions

← Modification précédente Modification suivante →

VisuelWikicode

Version du 26 mai 2025 à 10:23

Note : Ceci est une page de documentation pour un modèle.

Lien vers la documentation du modèle.

📘 Description

Ce modèle insère un élément `

` permettant de **réinitialiser le flottement** (clear) dans la mise en page CSS.

Il accepte un paramètre pour définir le côté où l’on souhaite stopper le flottement.

Cela évite que les éléments suivants se placent à côté d’éléments flottants (à gauche ou droite) et permet un meilleur contrôle du flux du document.

🔧 Syntaxe

{{Clear|valeur}}

`1` : la valeur du clear souhaitée, avec les options possibles :

 * `gauche` ou `left` → `clear: left;`
 * `droite` ou `right` → `clear: right;`
 * `aucun` ou `none` → `clear: none;`
 * Si aucun paramètre ou valeur inconnue, la valeur par défaut est `both` (`clear: both;`).

🧪 Exemple

{{Clear|gauche}}
{{Clear|right}}
{{Clear|aucun}}
{{Clear}}

🎨 Rendu

Texte avant flottant.
Modèle:Clear Texte après clear gauche.
Modèle:Clear Texte après clear droite.
Modèle:Clear Texte après clear none.
Modèle:Clear Texte après clear both.

🔍 Fonctionnalités

Traduit un paramètre simple en la propriété CSS `clear` correspondante.
Permet de gérer précisément le comportement des éléments flottants dans une page.
Utile pour corriger les problèmes d’empilement d’éléments flottants.

💡 Conseils

Utilisez ce modèle pour forcer le retour à la ligne après des blocs flottants.
Combinez avec des modèles d’alignement pour une mise en page flexible.
Ne pas abuser du clear pour éviter de casser la fluidité responsive.

La documentation de ce modèle est incluse depuis sa sous-page de documentation. Pour plus d’informations, voir la documentation du modèle.

@@ Ligne 1 : / Ligne 1 : @@
 <noinclude>
 <div class="documentation" style="background-color: #e6f4ea; padding: 1em; border: 1px solid #a5d6a7;">
 {{Sous-page de documentation}}</noinclude>
 <p>Lien vers la [[Modèle:{{PAGENAME}}/Documentation|documentation du modèle]].</p>
-== Description ==
-'''{{clr}}''' est un modèle servant à forcer un retour à la ligne après des éléments flottants, tels que des images ou des infobox, afin que le contenu suivant ne vienne pas s'afficher à côté.
-Il équivaut au code HTML suivant :
+== 📘 Description ==
-<pre><div style="clear: both;"></div></pre>
+Ce modèle insère un élément `<div>` permettant de **réinitialiser le flottement** (clear) dans la mise en page CSS.
+Il accepte un paramètre pour définir le côté où l’on souhaite stopper le flottement.
-== Utilisation ==
+Cela évite que les éléments suivants se placent à côté d’éléments flottants (à gauche ou droite) et permet un meilleur contrôle du flux du document.
-Placez simplement <code><nowiki>{{clr}}</nowiki></code> à l'endroit où vous souhaitez que le contenu suivant commence '''sous''' tous les éléments flottants.
-=== Exemple ===
+== 🔧 Syntaxe ==
-<pre>
+<pre>{{Clear|valeur}}</pre>
-[[File:Exemple.jpg|thumb|right|Un exemple]]
-Texte qui risque de remonter à côté de l'image...
-{{clr}}
+* `1` : la valeur du clear souhaitée, avec les options possibles :
+  * `gauche` ou `left` → `clear: left;`
+  * `droite` ou `right` → `clear: right;`
+  * `aucun` ou `none` → `clear: none;`
+  * Si aucun paramètre ou valeur inconnue, la valeur par défaut est `both` (`clear: both;`).
-Texte qui commence bien en dessous de l'image.
+== 🧪 Exemple ==
-</pre>
+<syntaxhighlight lang="wikitext">
+{{Clear|gauche}}
+{{Clear|right}}
+{{Clear|aucun}}
+{{Clear}}
+</syntaxhighlight>
-Ce qui donne :
+== 🎨 Rendu ==
+<div style="background:#eee; border:1px solid #ccc; padding:0.5em;">
+Texte avant flottant.<br>
+{{Clear|gauche}} <!-- applique clear:left -->
+Texte après clear gauche.<br>
+{{Clear|droite}} <!-- applique clear:right -->
+Texte après clear droite.<br>
+{{Clear|aucun}} <!-- clear:none -->
+Texte après clear none.<br>
+{{Clear}} <!-- clear:both par défaut -->
+Texte après clear both.<br>
+</div>
-[[File:Exemple.jpg|thumb|right|Un exemple]]
+=== 🔍 Fonctionnalités ===
-Texte qui risque de remonter à côté de l'image...
+* Traduit un paramètre simple en la propriété CSS `clear` correspondante.
+* Permet de gérer précisément le comportement des éléments flottants dans une page.
+* Utile pour corriger les problèmes d’empilement d’éléments flottants.
-{{clr}}
+== 💡 Conseils ==
+* Utilisez ce modèle pour forcer le retour à la ligne après des blocs flottants.
+* Combinez avec des modèles d’alignement pour une mise en page flexible.
+* Ne pas abuser du clear pour éviter de casser la fluidité responsive.
-Texte qui commence bien en dessous de l'image.
-== Voir aussi ==
-* [[Aide:Éléments flottants]]
-* [[Modèle:Clrright]] — (optionnel) Forcer un retour après un élément flottant à droite uniquement
-* [[Modèle:Clrleft]] — (optionnel) Pour les éléments flottants à gauche
-== Remarques ==
-Ce modèle est particulièrement utile dans les pages contenant plusieurs blocs alignés, comme :
-* des infobox empilées
-* des galeries d'images flottantes
-* des encadrés latéraux
-== Code source ==
-<pre>
-<div style="clear: both;"></div>
-</pre>
 ----
 La documentation de ce modèle est incluse depuis sa sous-page de documentation. Pour plus d’informations, voir la [[Modèle:{{PAGENAME}}/Documentation|documentation du modèle]].
-== Voir aussi ==
+== 🔗 Voir aussi ==
-* [[Modèle:Infobox V3/Début]]
+* [[CSS:clear]]
-* [[Modèle:Infobox V3/Fin]]
+* [[Modèle:Align]]
-* [[Modèle:Infobox V3/Tableau Ligne mixte]]
+* [[Modèle:Clearfix]]
+* [[Aide:CSS]]
-[[Catégorie:Modèle d’infobox]]
-[[Catégorie:Infobox V3]]
-[[Catégorie:Modèle avec image]]