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:

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

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

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

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

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

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

Результат: