Propriété float

La propriété float - définit des blocs flottants qui seront entourés de texte. La propriété float est parfois utilisée conjointement avec la propriété clear, qui annule l'habillage de l'élément.

Bien qu'à l'origine float ait été conçu pour insérer des blocs flottants dans le texte, actuellement, il est utilisé très largement et de manière non standard pour la construction de mises en page.

Syntaxe

sélecteur {
	float: left | right | none;
}

sélecteur {
	clear: both | left | right | none;
}

Valeurs pour float

Valeur	Description
`left`	Le bloc flottera à gauche, et le texte l'habillera à droite.
`right`	Le bloc flottera à droite, et le texte l'habillera à gauche.
`none`	Aucun habillage.

Valeur par défaut : none.

Valeurs pour clear

Valeur	Description
`left`	Annule l'habillage à gauche.
`right`	Annule l'habillage à droite.
`both`	Annule l'habillage à gauche et à droite.
`none`	Aucune annulation de l'habillage.

Valeur par défaut : none.

Exemple

Utilisons float de manière non standard, en mettant les éléments de liste en ligne :

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>

li {
	float: left;
	border: 1px solid red;
}

Voir aussi

la propriété clear,
qui annule le float pour les éléments supérieurs