Vous voulez par exemple avoir une image qui flotte à gauche ou à droite de votre texte ? C'est très simple à réaliser grâce à CSS, il suffit d'utiliser les propriétés de flottants.
Mais qu'est-ce qu'un flottant concrètement ? C'est tout simplement un élément qui flotte à gauche ou à droite du texte, à ne pas confondre avec l'alignement que nous verrons plus tard dans ce chapitre.
En CSS la propriété qui fait flotter est float.
Celle-ci peut prendre deux valeurs :
left : l'élément flottant sera à gauche
right : l'élément flottant sera à droite
Voici par exemple comment faire flotter une image à gauche. Pour cela je vais utiliser une classe que je vais attribuer à une balise image, comme on l'a vu au chapitre précédent.
Il y aura donc deux morceaux de code, un pour le HTML et un pour le CSS.
Voici le code HTML :
<img src="image.png" alt="image" />
Et le code CSS :
.monimage { float: left; }
Cela vous permettra d'aligner votre image à gauche et de la faire flotter, ce qui veut dire que tout texte que vous écrirez après (par exemple dans le même paragraphe) commencera à droite de l'image.
Si vous voulez faire l'inverse, c'est-à-dire que l'image flotte à droite et que le texte s'arrête à la bordure gauche de l'image, il vous suffit de changer le "left" en "right".
Et si je veux que mon texte se place en dessous ? Comme s'il n'y avait pas de float ?
Pour cela il existe une propriété CSS : clear.
La propriété clear vous permet de stopper le flottement de votre élément. Mais attention,, il ne faut pas mettre cette propriété sur l'élément qui flotte mais sur celui qui vient après (celui que l'on veut placer en dessous de l'élément flottant).
Cette propriété clear peut prendre trois valeurs :
left : qui annule le flottement à gauche
right : qui annule le flottement à droite
both : qui annule tout flottement
Et voilà, vous savez dorénavant faire des flottants en HTML et CSS.