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 :

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

cssdiv {
  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 :

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

cssdiv {
  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 :

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

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

Результат: