CSS Float

Qu'est-ce que CSS Float (flottant) ?

CSS float déplace un élément vers la gauche ou la droite, et les éléments qui l'entourent seront également réorganisés.

Float est souvent utilisé pour les images, mais il est aussi très utile pour la mise en page.

Comment les éléments flottent

Un élément flottant horizontalement signifie que l'élément ne peut se déplacer que vers la gauche ou la droite, pas vers le haut ou le bas.

Un élément flottant tentera de se déplacer le plus possible vers la gauche ou la droite, jusqu'à ce que son bord extérieur touche la bordure de la boîte conteneur ou la bordure d'une autre boîte flottante.

Les éléments après l'élément flottant s'enrouleront autour de lui.

Les éléments avant l'élément flottant ne seront pas affectés.

Si l'image est flottante à droite, le flux de texte suivant s'enroulera autour d'elle sur la gauche :

Éléments flottants côte à côte

Si vous placez plusieurs éléments flottants ensemble, ils seront adjacents les uns aux autres s'il y a de l'espace.

Ici, nous utilisons la propriété float pour la galerie d'images :

Effacer les flottants - Utilisation de clear

Après qu'un élément est rendu flottant, les éléments environnants seront réorganisés. Pour éviter cela, utilisez la propriété clear.

La propriété clear spécifie qu'aucun élément flottant ne peut apparaître d'un côté ou de l'autre d'un élément.

Ajoutez une galerie d'images au texte en utilisant la propriété clear :

Plus d’exemples

Ajoutez une bordure et une marge à l'image et faites-la flotter à droite du paragraphe

Ajoutons une bordure et une marge à l'image et faisons-la flotter à droite du paragraphe.

Le titre et l'image flottent à droite

Laissez le titre et l'image flotter à droite.

Faire flotter la première lettre du paragraphe à gauche

Modifiez le style pour que la première lettre du paragraphe flotte à gauche.

Créer une page web sans tableaux

Utilisez float pour créer un en-tête de page web, un pied de page, un contenu à gauche et un contenu principal.

Toutes les propriétés float en CSS

Les nombres dans la colonne "CSS" indiquent les différentes versions de CSS (CSS1 ou CSS2) qui définissent la propriété.