Pengenalan Properti float dalam CSS

Misalkan kita memiliki div dengan teks yang panjang. Mari kita sisipkan gambar di awal teks ini:

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

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

Результат:

Seperti yang Anda lihat, bagian bawah gambar terletak pada baris teks pertama, dan sisa bagiannya naik ke atas. Di sebelah kanan gambar terdapat ruang kosong yang besar. Mari kita buat agar teks mengisi ruang kosong tersebut. Untuk melakukannya, kita akan memberikan properti float pada gambar dengan nilai left:

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

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

Результат:

Jadi, sekarang gambar mengambang di sebelah kiri, dan teks mengelilinginya di sebelah kanan. Dengan demikian, ruang kosong di samping gambar menghilang.

Kita juga bisa membuat gambar mengambang bukan di kiri, tapi di kanan. Untuk itu, atur float ke nilai right:

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

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

Результат: