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ā:

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

cssdiv {
  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:

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

cssdiv {
  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:

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

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

Результат: