Attribut FLOAT
Rôle
L’attribut float permet de gérer l’alignement des éléments de type bloc. Dans le flux HTML (disposition par défaut des éléments), les balises de type bloc sont disposées de haut en bas.
Version : CSS2
Héritage (inherit) : non
Propriété Javascript : element.style.cssFloat
Testez vous-même cet attribut
Utilisez Codepen.
– Le code CSS
div{
width: 300px;
float: left;
}
#gauche{
background-color: silver;
}
#droite{
background-color: pink;
}
– 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>
Résultat
Remarquez l’alignement à gauche des blocs de contenu.
Compatibilité
L’attribut float est pris en charge par tous les principaux navigateurs.
Valeurs
Les différentes valeurs de l’attribut float sont:
- none
- Pas d’alignement : valeur par défaut
Syntaxe :
float : none - left
- Alignement à gauche du conteneur
Syntaxe :
float : left - right
- Alignement à droite du conteneur
Syntaxe :
float : right - 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 :
float : initial - inherit
- Hérite de la même propriété que l’élément parent.
Syntaxe :
float : inherit
A voir aussi
display clear position z-index flex align-content align-items align-self columns vertical-align
