Médiaforma

All posts tagged flottement

Dans la rubrique précédente, vous avez appris à faire flotter un élément par rapport à un autre. Supposons que vous vouliez que le texte cesse de s’enrouler autour de l’image à un certain point. Par exemple juste avant le mot “Totam“.

La première idée qui vient à l’esprit consiste à mettre le texte qui commence par Totam dans un autre paragraphe :

Le texte est bien scindé en deux paragraphes, mais le deuxième paragraphe continue de s’enrouler autour de l’image :

Pour parvenir au résultat souhaité, il faut définir la propriété CSS clear dans le deuxième paragraphe et lui affecter la valeur both :

Maintenant, le résultat est bien celui qui était attendu :


Dans les rubriques précédentes, vous avez appris à positionner un élément à un emplacement bien précis. Je vous propose maintenant d’apprendre à faire flotter un élément par rapport à un autre. Cela vous permettra par exemple d’enrouler du texte autour d’une image.

La technique à utiliser est élémentaire : il vous suffit de définir l’attribut float dans l’élément que vous désirez voir flotter et de lui affecter la valeur left ou right en fonction de l’emplacement souhaité.

Ici par exemple, l’image chat-poisson.png flotte à droite et le texte qui suit s’enroule autour :

Si vous affectez la valeur left à la propriété float, l’image flotte à gauche et le texte s’enroule autour :