Comprendre float en CSS par l’exemple

Florens Verschelde

Légende

beige : élément parent (conteneur), qui vient englober les éléments flottants grâce à la propriété overflow: auto; [cf. ce tutoriel sur les éléments en positionnement flottant]

bleu ciel : paragraphe simple (pas de style spécifique appliqué)

orange : div simple avec hauteur fixée à 100 pixels

rouge : élément flottant à gauche (propriété float: left;)

vert : élément flottant à droite (propriété float: right;)

Note 1 : tous les paragraphes et tous les blocs dans les exemples suivant ont les mêmes marges par défaut, fixées de la manière suivante : margin: 1em 0;

Note 2 : on remarquera que l'écart entre deux blocs ou paragraphes est normalement de 1em. Par contre, lorsqu'un des deux éléments est flottant, les marges des deux éléments ne fusionnent plus, et on obtient un écart de 2em.

Sans élément flottant

Position dans le code : paragraphe simple suivi d'un bloc simple

Ceci est un paragraphe simple

Ceci est un bloc simple

Paragraphe témoin

Deuxième paragraphe témoin

Position dans le code : bloc simple, suivi d'un paragraphe simple

Ceci est un bloc simple

Ceci est un paragraphe simple

Paragraphe témoin

Deuxième paragraphe témoin

Avec un paragraphe flottant à gauche

Position dans le code : Paragraphe flottant à gauche, suivi d'un bloc simple

Paragraphe flottant à gauche

Ceci est un bloc simple

Paragraphe témoin

Deuxième paragraphe témoin

Position dans le code : Bloc simple, suivi d'un paragraphe flottant à gauche

Ceci est un bloc simple

Paragraphe flottant à gauche

Paragraphe témoin

Deuxième paragraphe témoin

Avec un paragraphe flottant à droite

Position dans le code : Paragraphe flottant à droite, suivi d'un bloc simple

Paragraphe flottant à droite

Ceci est un bloc simple

Paragraphe témoin

Deuxième paragraphe témoin

Position dans le code : Bloc simple, suivi d'un paragraphe flottant à droite

Ceci est un bloc simple

Paragraphe flottant à droite

Paragraphe témoin

Deuxième paragraphe témoin

Avec un bloc flottant à gauche

Position dans le code : Paragraphe simple, suivi d'un bloc flottant à gauche

Ceci est un paragraphe simple

Bloc flottant à gauche

Paragraphe témoin

Deuxième paragraphe témoin

Position dans le code : Bloc flottant à gauche, suivi d'un paragraphe simple

Bloc flottant à gauche

Ceci est un paragraphe simple

Paragraphe témoin

Deuxième paragraphe témoin

Avec un bloc flottant à droite

Position dans le code : Paragraphe simple, suivi d'un bloc flottant à droite

Ceci est un paragraphe simple

Bloc flottant à droite

Paragraphe témoin

Deuxième paragraphe témoin

Position dans le code : Bloc flottant à droite, suivi d'un paragraphe simple

Bloc flottant à droite

Ceci est un paragraphe simple

Paragraphe témoin

Deuxième paragraphe témoin

Avec un paragraphe flottant à gauche ET un bloc flottant à droite

Position dans le code : Paragraphe flottant à gauche, suivi d'un bloc flottant à droite

Paragraphe flottant à gauche

Bloc flottant à droite

Paragraphe témoin

Deuxième paragraphe témoin

Position dans le code : Bloc flottant à droite, suivi d'un paragraphe flottant à gauche

Bloc flottant à droite

Paragraphe flottant à gauche

Paragraphe témoin

Deuxième paragraphe témoin

Avec un paragraphe flottant à droite ET un bloc flottant à gauche

Position dans le code : Paragraphe flottant à droite, suivi d'un bloc flottant à gauche

Paragraphe flottant à droite

Bloc flottant à gauche

Paragraphe témoin

Deuxième paragraphe témoin

Position dans le code : Bloc flottant à gauche, suivi d'un paragraphe flottant à droite

Bloc flottant à gauche

Paragraphe flottant à droite

Paragraphe témoin

Deuxième paragraphe témoin

Avec un paragraphe flottant à gauche ET un bloc flottant à gauche

Position dans le code : Paragraphe flottant à gauche, suivi d'un bloc flottant à gauche

Paragraphe flottant à gauche

Bloc flottant à gauche

Paragraphe témoin

Deuxième paragraphe témoin

Position dans le code : Bloc flottant à gauche, suivi d'un paragraphe flottant à gauche

Bloc flottant à gauche

Paragraphe flottant à gauche

Paragraphe témoin

Deuxième paragraphe témoin

Avec un paragraphe flottant à droite ET un bloc flottant à droite

Position dans le code : Paragraphe flottant à droite, suivi d'un bloc flottant à droite

Paragraphe flottant à droite

Bloc flottant à droite

Paragraphe témoin

Deuxième paragraphe témoin

Position dans le code : Bloc flottant à droite, suivi d'un paragraphe flottant à droite

Bloc flottant à droite

Paragraphe flottant à droite

Paragraphe témoin

Deuxième paragraphe témoin


Annexe : et avec un contenu plus important ?

Si l'on ajoute plus de contenu, par exemple du texte, dans un paragraphe ou un bloc, il s'étendra en largeur autant que possible. Du coup, plus de place disponible pour placer un autre élément en positionnement flottant :

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Paragraphe flottant à gauche

Paragraphe témoin

Deuxième paragraphe témoin

Utiliser une marge ne suffira malheureusement pas pour créer l'espace nécessaire. En effet, l'espace blanc ainsi créé est un espace "réservé", qui reste vide. Un bloc ne pourra donc pas venir s'y loger. Exemple :

margin-left: 50%;
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Paragraphe flottant à gauche

Paragraphe témoin

Deuxième paragraphe témoin

Il faudra donc donner une largeur fixe au bloc :

width: 50%;
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Paragraphe flottant à gauche

Paragraphe témoin

Deuxième paragraphe témoin

Bien entendu, avec plusieurs blocs ayant un contenu important, chaque bloc devra avoir une largeur fixe. Par exemple :

width: 40%;
Premier dans le flux
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
width: 30%;
Deuxième dans le flux
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
width: 30%;
Troisième dans le flux
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Paragraphe témoin

Deuxième paragraphe témoin