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:

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

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

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

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

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

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