A float elemek hatása a szülő elemre CSS-ben

Tegyük fel, hogy van egy divünk, amelyben egy kép található. A div-nek adjunk keretet, a képnek pedig egyelőre ne adjuk meg a float tulajdonságot.

Nézzük meg, hogyan fog ez kinézni a böngészőben:

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

cssdiv {
  border: 1px solid red;
}

Результат:

Most állítsuk be a kép float tulajdonságát left értékre. Ebben az esetben meglepő dolog történik - a szülő magassága eltűnik, az alsó szegélye közvetlenül a felső után kezdődik, és a kép kibújik alul a szülőjéből:

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

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

Результат:

Kiderült, hogy a float tulajdonsággal rendelkező elemek nem növelik meg szülőjük magasságát.

Írjuk a float tulajdonságnak a left helyett a right értéket. A szülő viselkedése nem változik, de a kép jobbról fog elhelyezkedni:

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

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

Результат: