Float-elementtien vaikutus vanhempaan CSS:ssä

Oletetaan nyt, että meillä on div, jonka sisällä on kuva. Asetetaan diville reunus, mutta kuvalle emme vielä aseta float-ominaisuutta.

Katsotaan miltä se näyttää selaimessa:

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

cssdiv {
  border: 1px solid red;
}

Результат:

Asetetaan nyt kuvalle float-ominaisuuden arvo left. Tässä tapauksessa tapahtuu ihmeellinen asia - vanhemman korkeus katoaa, sen alareuna tulee välittömästi yläreunan jälkeen, ja kuva tunkeutuu alhaalta vanhempansa alitse:

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

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

Результат:

Osoittautuu, että elementit, joille on asetettu float-ominaisuus, eivät laajenna vanhempaansa korkeussuunnassa.

Asetetaan float-ominaisuudelle left:n sijasta arvo right. Vanhemman käyttäytyminen ei muutu, mutta kuva alkaa kellua oikealla:

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

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

Результат: