Teks dalam Ibu Bapa Float dalam CSS

Mari kita buang sifat height untuk div dan letakkan sedikit teks sebelum gambar.

Dalam kes ini, ketinggian div kami akan sama dengan ketinggian teks, dan gambar masih akan keluar dari div:

<div>
	teks
	<img src="img.png" alt="">
</div>

div {
	border: 1px solid red;
}
img {
	float: right;
}

Mari letakkan teks selepas gambar - hasilnya tidak akan berubah:

<div>
	<img src="img.png" alt="">
	teks
</div>

div {
	border: 1px solid red;
}
img {
	float: right;
}

Mari kita buat supaya gambar terapung di sebelah kiri - hasilnya akan serupa:

<div>
	<img src="img.png" alt="">
	teks
</div>

div {
	border: 1px solid red;
}
img {
	float: left;
}

Mari tambah satu lagi div di bawah - gambar akan bertindih ke atasnya juga:

<div>
	<img src="img.png" alt="">
	teks
</div>
<div>
	teks
</div>

div {
	border: 1px solid red;
}
img {
	float: left;
}

Jika begitu banyak teks ditambah ke dalam div pertama sehingga ketinggiannya melebihi gambar - ia tidak akan bertindih ke atas div kedua:

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

div {
	text-align: justify;
	border: 1px solid red;
}
img {
	float: left;
}

Perkara ini sangat penting - semasa pembangunan mungkin berlaku bahawa dalam beberapa blok anda mempunyai banyak teks, tetapi kemudian dalam operasi sebenar tapak web, blok ini akan mempunyai kurang teks daripada yang dirancang. Ini akan menyebabkan dalam kes ini masalah timbul dengan pertindihan elemen terapung pada blok bersebelahan.