Introduction à la propriété float en CSS

Supposons que nous ayons une div avec un texte long. Insérons une image au début de ce texte :

<div>
	<img src="img.png" alt="">
	some long text
</div>

div {
	width: 400px;
	text-align: justify;
}

Comme vous pouvez le voir, le bas de l'image se positionne sur la première ligne de texte, et le reste monte vers le haut. Un grand espace vide apparaît à droite de l'image. Faisons en sorte que le texte remplisse cet espace vide. Pour cela, appliquons à l'image la propriété float avec la valeur left :

<div>
	<img src="img.png" alt="">
	some long text
</div>

div {
	width: 400px;
	text-align: justify;
}
img {
	float: left;
}

Ainsi, l'image flotte maintenant à gauche, et le texte l'épouse sur sa droite. L'espace vide sur le côté de l'image a disparu.

On peut forcer l'image à flotter non pas à gauche, mais à droite. Pour cela, réglons float sur la valeur right :

<div>
	<img src="img.png" alt="">
	some long text
</div>

div {
	width: 400px;
	text-align: justify;
}
img {
	float: right;
}

Prenez un long texte. Insérez une image au début du texte, et une autre au milieu. Faites en sorte que la première image flotte à gauche, et la seconde à droite.