CSS-ominaisuuden float esittely

Oletetaan, että meillä on div jossa on pitkä teksti. Lisätään tekstin alkuun kuva:

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

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

Результат:

Kuten näette, kuvan alaosa sijaitsee tekstin ensimmäisellä rivillä, ja loppuosa meneekin ylöspäin. Kuvan oikealle puolelle jää suuri tyhjä tila. Tehdään niin, että teksti täyttää tämän tyhjän tilan. Tätä varten asetamme kuvalle ominaisuuden float arvoon left:

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

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

Результат:

Siis, nyt kuva kelluu vasemmalla, ja teksti kiertää sen mukaisesti oikealla. Samalla tyhjä tila kuvan vieressä katoaa.

Kuva voidaan saada kellumaan ei vasemmalla, vaan oikealla. Tätä varten float asetetaan arvoon right:

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

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

Результат: