float gauche float droit
Ce paragraphe contient une image flottante à droite et une image flottante à gauche ce qui induit que le texte doit couler le long des images.

Ce paragraphe en marron a un "clear : both" et de ce fait ne doit pas couler le long d'aucune des deux images mais se placer en dessous.

Explications

Une image est placée de chaque coté de la page à l'aide des propriétés flux1 et flux2. Vous pouvez noter qu'un "margin:10px" est défini pour éviter que le texte placé entre les deux images ne vienne coller. C'est un petit plus de bonne présentation.

Le premier paragraphe du texte va donc venir se placer entre les deux images. Pour le deuxième paragraphe de couleur marron, et bien que tapé à la suite, comme la propriété "flux" est codifiée avec la valeur "both", vous allez en conséquence le déplacer sous chacune des boîtes flottantes qui précèdent dans le code source, et ce texte va s'écouler de façon indépendante.

 

 

 

 

Ce "float: left" en jaune est défini et positionné devant le "float: right" qui est de couleur bleu clair.
 
Ce "float: right" en bleu clair est défini et positionné après la propriété "float: left" qui est de couleur jaune.
Ce paragraphe contient une image flottante à droite et une image flottante à gauche ce qui induit que le texte doit couler le long des images.