Introducere în proprietatea float în CSS

Să presupunem că avem un div cu un text lung. Să inserăm la începutul acestui text o imagine:

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

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

Результат:

După cum vedeți, partea de jos a imaginii se află pe prima linie de text, iar restul textului merge în sus. În dreapta imaginii apare un spațiu gol mare. Să facem astfel încât textul să umple acest spațiu gol. Pentru aceasta, vom seta proprietatea float cu valoarea left:

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

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

Результат:

Deci, acum imaginea plutește în stânga, iar textul o înconjoară corespunzător în dreapta. În acest caz, spațiul gol din lateralul imaginii a dispărut.

Putem face ca imaginea să plutească nu în stânga, ci în dreapta. Pentru aceasta float îl setăm la valoarea right:

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

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

Результат: