Attribut CLEAR
Rôle
L’attribut clear permet d’empêcher le chevauchement d’un élément qui est dans le flux HTML sur un élément flottant (float). Dans le flux HTML (disposition par défaut des éléments), un élément qui flotte n’occupe plus toute la ligne et l’élément qui suit aura tendance à occuper cet espace libéré
Version : CSS2
Héritage (inherit) : non
Propriété Javascript : element.style.clear
Testez vous-même cet attribut
Utilisez Codepen.
– Le code CSS
div{
width: 300px;
float: left;
margin: 5px;
}
#gauche{
background-color: silver;
}
#droite{
background-color: pink;
}
h1{
background-color: orange;
clear: left;
}
– Le code HTML
<div id="gauche">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae,possimus in quod totam mollitia ipsam quia tenetur porro distinctio dignissimos, fugit odio quas ipsa. Omnis iure aliquam maxime incidunt inventore.</div> <div id="droite">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, possimus in quod totam mollitia ipsam quia tenetur porro distinctio dignissimos.</div> <h1>Titre</h1>
Résultat
Dans cet exemple, l’attribut clear n’est pas appliqué au titre.
Dans cet exemple, l’attribut float est appliqué au titre. Ce dernier ne chevauche plus les blocs flottants.
Compatibilité
L’attribut clear est pris en charge par tous les principaux navigateurs.
Valeurs
Les différentes valeurs de l’attribut clear sont:
- none
- Pas de dégagement : valeur par défaut
Syntaxe :
clear : none - left
- Interdiction de chevaucher les éléments qui flottent à gauche
Syntaxe :
clear : left - right
- Interdiction de chevaucher les éléments qui flottent à droite
Syntaxe :
clear : right - both
- Interdiction de chevaucher les éléments qui flottent à gauche et à droite
Syntaxe :
clear : both - initial
- Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécificité.
Syntaxe :
clear : initial - inherit
- Hérite de la même propriété que l’élément parent.
Syntaxe :
clear : inherit
A voir aussi
display clear position z-index flex align-content align-items align-self columns vertical-align
