Hyrje në Vetinë float në CSS

Le të kemi një div me një tekst të gjatë. Le të vendosim në fillim të këtij teksti një foto:

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

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

Результат:

Siç e shihni, fundi i fotos vendoset në rreshtin e parë të tekstit, kurse pjesa tjetër shkon lart. Në të djathtë të fotos rezulton një hapësirë e madhe bosh. Le ta bëjmë që teksti të mbushë këtë hapësirë bosh. Për këtë, fotos do t'i vendosim vetinë float në vlerën left:

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

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

Результат:

Pra, tani fotoja noton majtas, kurse teksti e përshkuan atë në përputhje me rrethanat djathtas. Në këtë rast hapësira bosh anash fotos u zhduk.

Fotja mund të detyrohet të notojë jo majtas, por djathtas. Për këtë float do ta vendosim në vlerën right:

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

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

Результат: