Floatide mõju vanemale CSS-is

Oletame nüüd, et meil on div, milles asub pilt. Div-ile määrame piiri, pildile aga ei määra omadust float esialgu.

Vaatame, kuidas see brauseris välja näeb:

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

cssdiv {
  border: 1px solid red;
}

Результат:

Nüüd määrame pildile omaduse float väärtusega left. Sel juhul juhtub imeline asi - vanema kõrgus kaob, selle alumine piir algab kohe peale ülemist ning pilt hakkab alla oma vanemast välja ulatuma:

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

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

Результат:

Selgub, et elementidel, millele on määratud omadus float, ei suurenda oma vanemat kõrguses.

Paneme omadusele float väärtuseks right asemel left. Vanema käitumine ei muutu, kuid pilt hakkab ujuma paremal:

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

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

Результат: