Įvadas į float savybę CSS

Tarkime, kad turime div su kokiu nors ilgu tekstu. Įterpkime į šio teksto pradžią paveikslėlį:

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

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

Результат:

Kaip matote, paveikslėlio apačia išsidėsto pirmoje teksto eilutėje, o likusi dalis patenka aukštyn. Dešinėje nuo paveikslėlio atsiranda didelė tuščia vieta. Padarykime taip, kad tekstas užpildytų šią tuščią vietą. Tam paveikslėliui nustatysime savybę float reikšme left:

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

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

Результат:

Taigi, dabar paveikslėlis plūdra kairėje, o tekstas ją apteka atitinkamai dešinėje. Tuo pačiu tuščia vieta šone nuo paveikslėlio išnyksta.

Galima priversti paveikslėlį plūdurti ne kairėje, o dešinėje. Tam float nustatykime reikšmę right:

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

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

Результат: