Propriété flottante CSS
Exemple
Laissez une image flotter vers la droite :
img
{
float: right;
}
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La float
propriété spécifie si un élément doit flotter à gauche, à droite ou pas du tout.
Remarque : Les éléments en position absolue ignorent la float
propriété !
Remarque : Les éléments à côté d'un élément flottant s'enchaîneront autour de lui. Pour éviter cela, utilisez la propriété clear ou le hack clearfix (voir exemple en bas de cette page).
Valeur par défaut: | rien |
---|---|
Hérité: | non |
Animable : | non. En savoir plus sur l'animation |
Version: | CSS1 |
Syntaxe JavaScript : | objet .style.cssFloat="gauche" |
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
Property | |||||
---|---|---|---|---|---|
float | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
Syntaxe CSS
float: none|left|right|initial|inherit;
Valeurs de propriété
Value | Description | Play it |
---|---|---|
none | The element does not float, (will be displayed just where it occurs in the text). This is default | |
left | The element floats to the left of its container | |
right | The element floats the right of its container | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Plus d'exemples
Exemple
Laisser une image flotter vers la gauche :
img
{
float: left;
}
Exemple
Laisser l'image être affichée juste là où elle apparaît dans le texte (flottant : aucun) :
img
{
float: none;
}
Exemple
Laissez la première lettre d'un paragraphe flotter vers la gauche et stylisez la lettre :
span {
float: left;
width:
0.7em;
font-size: 400%;
font-family: algerian, courier;
line-height: 80%;
}
Exemple
Utilisez float avec une liste d'hyperliens pour créer un menu horizontal :
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {width: 25%;}
.content {width: 75%;}
Exemple
Utilisez float pour créer une page d'accueil avec un en-tête, un pied de page, un contenu de gauche et un contenu principal :
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {width: 25%;}
.content {width: 75%;}
Exemple
Ne pas autoriser les éléments flottants à gauche ou à droite d'un élément <p> spécifié :
img {
float: left;
}
p.clear {
clear: both;
}
Exemple
Si un élément flottant est plus grand que l'élément contenant, il débordera de son conteneur. Il est possible de résoudre ce problème avec le "clearfix hack":
.clearfix::after {
content: "";
clear: both;
display: table;
}
Pages connexes
Tutoriel CSS : flottant CSS
Référence HTML DOM : propriété cssFloat