Увядзенне ў уласцівасць 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;
}

Результат: