CSS plūstošo elementu ietekme uz vecāka elementu

Pieņemsim, ka mums ir div, kurā atrodas attēls. Div uzstādīsim robežu, bet attēlam pagaidām neuzstādīsim īpašību float.

Apskatīsim, kā tas izskatīsies pārlūkprogrammā:

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

div {
	border: 1px solid red;
}

Tagad uzstādīsim attēlam īpašību float ar vērtību left. Šajā gadījumā notiks pārsteidzoša lieta - vecāka elementa augstums pazudīs, tā apakšējā robeža sāksies tūlīt pēc augšējās, un attēls izkļūs no apakšas ārpus sava vecāka elementa:

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

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

Izrādās, ka elementi, kuriem uzstādīta īpašība float, neizpleš savu vecāka elementu augstumā.

Uzstādīsim īpašībai float vietā left vērtību right. Vecāka elementa uzvedība nemainīsies, bet attēls sāks plūst pa labi:

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

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