Teksts vecākā elementā ar float elementiem CSS

Noņemsim īpašību height div elementam un ievietosim nelielu tekstu pirms attēla.

Šajā gadījumā mūsu div augstums būs vienāds ar teksta augstumu, un attēls joprojām izkļūs ārpus div:

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

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

Ievietosim tekstu aiz attēla - rezultāts nemainīsies:

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

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

Ļausim attēlam peldēt pa kreiso malu - rezultāts būs līdzīgs:

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

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

Apakšā pievienosim vēl vienu div - attēls uzlīps arī uz tā:

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

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

Ja pirmajā div pievienosim tik daudz teksta, ka pēc augstuma tas būs lielāks par attēlu - tas neuzlīps uz otro div:

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

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

Šis punkts ir ļoti svarīgs - izstrādes laikā var gadīties, ka kādā blokā jums ir diezgan daudz teksta, bet tad reālā darbībā vietnē šajā blokā būs mazāk teksta, nekā plānots. Izrādīsies, ka šajā gadījumā parādīsies problēma ar peldošo elementu uzkāpšanu uz blakus esošajiem blokiem.