Aller au contenu

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

De Wikiquestia
Aucun résumé des modifications
Aucun résumé des modifications
 
(4 versions intermédiaires par le même utilisateur non affichées)
Ligne 1 : Ligne 1 :
<noinclude><div class="documentation" style="background-color: #ECFBF3;">{{Sous-page de documentation}}</noinclude>
<noinclude><div class="documentation" style="background-color: #ECFBF3;">{{Sous-page de documentation}}</noinclude>
<p>Lien vers la [[Modèle:{{PAGENAME}}/Documentation|documentation du modèle]].</p>


== 📘 Description ==
== 📘 Description ==
Ce modèle insère un élément `<div>` permettant de **réinitialiser le flottement** (clear) dans la mise en page CSS.   
Ce modèle insère un élément <code><nowiki><div></nowiki></code> 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.
Il accepte un paramètre pour définir le côté où l’on souhaite stopper le flottement.


Ligne 10 : Ligne 8 :


== 🔧 Syntaxe ==
== 🔧 Syntaxe ==
<pre>{{Clear|valeur}}</pre>
<syntaxhighlight lang="wikitext">{{Clear}}</syntaxhighlight>
 
* `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 ==
<syntaxhighlight lang="wikitext">
{{Clear|gauche}}
{{Clear|right}}
{{Clear|aucun}}
{{Clear}}
</syntaxhighlight>
 
== 🎨 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>


=== 🔍 Fonctionnalités ===
=== 🔍 Fonctionnalités ===
Ligne 48 : Ligne 19 :
* Combinez avec des modèles d’alignement pour une mise en page flexible.
* 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.
* 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 [[Modèle:{{PAGENAME}}/Documentation|documentation du modèle]].


== 🔗 Voir aussi ==
== 🔗 Voir aussi ==
* [[CSS:clear]]
* [[Modèle:Lang]]
* [[Modèle:Align]]
* [[Modèle:Trim]]
* [[Modèle:Clearfix]]
* [[Aide:CSS]]

Dernière version du 27 mai 2025 à 19:39

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

📘 Description[modifier le wikicode]

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.

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[modifier le wikicode]

{{Clear}}

🔍 Fonctionnalités[modifier le wikicode]

  • 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[modifier le wikicode]

  • 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.

🔗 Voir aussi[modifier le wikicode]