Floatų poveikis tėviniam elementui CSS

Tarkime, kad dabar turime div, kuriame yra paveikslėlis. Div nustatykime sienelę, o paveikslėliui kol kas nenustatykime savybės float.

Pažiūrėkime, kaip tai atrodys naršyklėje:

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

div {
	border: 1px solid red;
}

Dabar nustatykime paveikslėliui savybę float su reikšme left. Šiuo atveju įvyks nuostabus dalykas - tėvinio elemento aukštis išnyks, jo apatinė sienelė bus iškart po viršutine, o paveikslėlis išlįs apačioje iš savo tėvinio elemento:

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

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

Pasirodo, elementai, kuriems nustatyta savybė float, neišplečia savo tėvinio elemento aukščio.

Pakeiskime savybės float reikšmę left į reikšmę right. Tėvinio elemento elgsena nesikeis, bet paveikslėlis pradės plūduriuoti dešinėje:

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

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