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:

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

div {
	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:

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

div {
	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:

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

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