Text în părintele float-urilor în CSS

Să eliminăm proprietatea height pentru div și să punem un text scurt înaintea imaginii.

În acest caz, înălțimea div-ului nostru va fi egală cu înălțimea textului, iar imaginea va ieși în continuare în afara div-ului:

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

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

Să punem textul după imagine - rezultatul nu se va schimba:

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

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

Să facem ca imaginea să plutească în partea stângă - rezultatul va fi similar:

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

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

Să adăugăm încă un div dedesubt - imaginea va intra și peste acesta:

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

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

Dacă însă în primul div se adaugă atât de mult text, încât pe înălțime va fi mai mare decât imaginea - aceasta nu va intra peste al doilea div:

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

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

Acest aspect este foarte important - în timpul dezvoltării poate fi ca într-un bloc să aveți destul de mult text, iar apoi în funcționarea reală a site-ului în acest bloc va fi mai puțin text decât a fost planificat. Se va dovedi că în acest caz va apărea problema cu pătrunderea elementelor plutitoare în blocurile învecinate.