Въведение в свойството float в CSS

Нека имаме див с някакъв дълъг текст. Нека вмъкнем в началото на този текст изображение:

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

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

Результат:

Както виждате, долната част на изображението се разполага на първия ред от текста, а останалата част излиза нагоре. Вдясно от изображението се получава голямо празно пространство. Нека направим така, че текстът да запълни това празно пространство. За това на изображението ще зададем свойство float със стойност left:

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

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

Результат:

И така, сега изображението плава отляво, а текстът го обгражда съответно отдясно. При това празното пространство отстрани на изображението изчезна.

Можем да накараме изображението да плава не отляво, а отдясно. За това float ще зададем на стойност right:

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

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

Результат: