Effekten af floats på forælderen i CSS

Lad os nu antage, at vi har en div, som indeholder et billede. Vi giver div'en en grænse, og vi giver ikke billedet egenskaben float endnu.

Lad os se, hvordan det vil se ud i browseren:

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

cssdiv {
  border: 1px solid red;
}

Результат:

Lad os nu sætte egenskaben float for billedet til værdien left. I dette tilfælde vil der ske en utrolig ting - forælderens højde forsvinder, dens nederste grænse vil begynde lige efter den øverste, og billedet vil stikke ud under sin forælder:

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

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

Результат:

Det betyder, at elementer, som har fået tildelt egenskaben float, udvider ikke deres forælders højde.

Lad os i stedet for left sætte egenskaben float til værdien right. Forælderens adfærd ændres ikke, men billedet vil begynde at flyde til højre:

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

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

Результат: