Pengenalan kepada sifat float dalam CSS

Katakan kita mempunyai div dengan teks yang panjang. Mari masukkan gambar pada permulaan teks ini:

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

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

Seperti yang anda lihat, bahagian bawah gambar terletak pada baris pertama teks, manakala bahagian selebihnya naik ke atas. Ruang kosong yang besar terhasil di sebelah kanan gambar. Mari kita buat supaya teks memenuhi ruang kosong itu. Untuk melakukan ini, kita akan menetapkan sifat float kepada nilai left untuk gambar:

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

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

Jadi, sekarang gambar terapung di sebelah kiri, manakala teks mengelilinginya di sebelah kanan. Pada masa yang sama, ruang kosong di sebelah gambar telah hilang.

Kita juga boleh membuat gambar terapung bukan di sebelah kiri, tetapi di sebelah kanan. Untuk ini, tetapkan float kepada nilai right:

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

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

Ambil teks yang panjang. Masukkan satu gambar pada permulaan teks, dan satu lagi di bahagian tengah. Buatkan gambar pertama terapung di sebelah kiri, dan gambar kedua - di sebelah kanan.