Acțiunea elementelor flotante asupra părintelui în CSS

Să presupunem că avem un div în care se află o imagine. Să setăm o bordură div-ului, iar imaginii să nu-i setăm proprietatea float deocamdată.

Să vedem cum va arăta asta în browser:

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

cssdiv {
  border: 1px solid red;
}

Результат:

Acum să setăm proprietatea float pentru imagine cu valoarea left. În acest caz se va întâmpla ceva uimitor - înălțimea părintelui va dispărea, bordura lui inferioară va începe imediat după cea superioară, iar imaginea va ieși în afară de sub părintele său:

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

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

Результат:

Rezultă că elementele cărora li se setează proprietatea float, nu extind înălțimea părintelui lor.

Să scriem valoarea right pentru proprietatea float în loc de left. Comportamentul părintelui nu se va schimba, dar imaginea va începe să plutească în dreapta:

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

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

Результат: