Introduktion till egenskapen float i CSS

Låt oss säga att vi har en div med någon lång text. Låt oss sätta in en bild i början av denna text:

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

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

Результат:

Som du kan se placeras bildens botten på den första textraden, och resten av texten går uppåt. Till höger om bilden finns det ett stort tomt utrymme. Låt oss göra så att texten fyller detta tomma utrymme. För att göra detta sätter vi egenskapen float till värdet left på bilden:

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

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

Результат:

Så, nu flyter bilden till vänster, och texten flödar runt den till höger. Samtidigt försvinner det tomma utrymmet bredvid bilden.

Man kan få bilden att flyta inte till vänster, utan till höger. För detta sätter vi float till värdet right:

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

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

Результат: