Teks dalam Induk Float di CSS

Mari kita hapus properti height untuk div dan berikan sedikit teks sebelum gambar.

Dalam kasus ini, tinggi div kita akan sama dengan tinggi teks, dan gambar akan tetap keluar dari div:

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

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

Mari kita letakkan teks setelah gambar - hasilnya tidak akan berubah:

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

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

Mari kita buat gambar mengambang ke kiri - hasilnya akan serupa:

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

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

Mari kita tambahkan satu div lagi di bawah - gambar akan menumpuk ke atasnya juga:

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

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

Jika kita menambahkan teks yang sangat banyak ke div pertama sehingga tingginya lebih besar dari gambar - gambar tidak akan menumpuk ke 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;
}

Momen ini sangat penting - selama pengembangan mungkin terjadi bahwa di suatu blok anda memiliki cukup banyak teks, tetapi kemudian dalam pengoperasian situs yang sebenarnya, blok ini akan berisi lebih sedikit teks daripada yang direncanakan. Akibatnya, dalam kasus ini, masalah penumpukan elemen mengambang ke blok tetangga akan muncul.