« Modèle:Clr/Documentation » : différence entre les versions
Apparence
Aucun résumé des modifications |
Aucun résumé des modifications |
||
| Ligne 1 : | Ligne 1 : | ||
<noinclude> | <noinclude><div class="documentation" style="background-color: #ECFBF3;">{{Sous-page de documentation}}</noinclude> | ||
<div class="documentation" style="background-color: # | |||
{{Sous-page de documentation}}</noinclude> | |||
<p>Lien vers la [[Modèle:{{PAGENAME}}/Documentation|documentation du modèle]].</p> | <p>Lien vers la [[Modèle:{{PAGENAME}}/Documentation|documentation du modèle]].</p> | ||
Version du 26 mai 2025 à 10:26
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.