Effekten av floats på forelderen i CSS

La oss nå anta at vi har en div, inne i den ligger et bilde. Til div-en gir vi en kant, og til bildet gir vi ikke egenskapen float ennå.

La oss se hvordan dette vil se ut i nettleseren:

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

cssdiv {
  border: 1px solid red;
}

Результат:

La oss nå sette egenskapen float for bildet til verdien left. I dette tilfellet vil noe utrolig skje - høyden på forelderen vil forsvinne, dens nedre kant vil begynne umiddelbart etter den øvre, og bildet vil stikke ut under sin forelder:

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

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

Результат:

Det viser seg at elementer som har fått egenskapen float, utvider ikke sin forelders høyde.

La oss i stedet for left sette egenskapen float til verdien right. Oppførselen til forelderen vil ikke endre seg, men bildet vil begynne å flyte til høyre:

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

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

Результат: