Вовед во својството 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;
}

Результат: