Wprowadzenie do właściwości float w CSS

Załóżmy, że mamy div z długim tekstem. Wstawmy na początku tego tekstu obrazek:

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

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

Результат:

Jak widzicie, dół obrazka znajduje się na pierwszej linii tekstu, a reszta idzie w górę. Po prawej stronie obrazka powstaje duża pusta przestrzeń. Sprawmy, aby tekst wypełnił tę pustą przestrzeń. W tym celu ustawimy dla obrazka właściwość float z wartością left:

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

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

Результат:

A więc teraz obrazek unosi się po lewej stronie, a tekst opływa go odpowiednio po prawej stronie. Przy tym pusta przestrzeń z boku obrazka zniknęła.

Można sprawić, żeby obrazek unosił się nie po lewej stronie, ale po prawej. W tym celu float ustawimy na wartość right:

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

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

Результат: