Inleiding tot die float eienskap in CSS

Laat ons 'n div hê met 'n lang teks. Laat ons aan die begin van hierdie teks 'n prent invoeg:

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

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

Результат:

Soos jy kan sien, lê die onderkant van die prent op die eerste reël van die teks, en die res van die prent gaan na bo. Regs van die prent is daar 'n groot leë spasie. Laat ons dit so maak dat die teks hierdie leë spasie vul. Om dit te doen, gee ons die prent die eienskap float met die waarde left:

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

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

Результат:

Dus, nou float die prent aan die linkerkant, en die teks omstroom dit dienooreenkomstig aan die regterkant. Die leë spasie langs die prent het verdwyn.

Jy kan die prent laat float nie links nie, maar regs. Om dit te doen, stel ons float in op die waarde right:

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

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

Результат: