Действие на флоати върху родителя в CSS

Нека сега имаме div, в който има изображение. На div ще зададем граница, а на изображението засега няма да задаваме свойството float.

Нека да видим как това ще изглежда в браузъра:

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

div {
	border: 1px solid red;
}

Сега нека зададем на изображението свойството float със стойност left. В този случай ще се случи нещо учудващо - височината на родителя ще изчезне, долната му граница ще започне веднага след горната, а изображението ще излезе отдолу от своя родител:

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

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

Оказва се, че елементите, на които е зададено свойството float, не разширяват своя родител по височина.

Нека на свойството float вместо left запишем стойност right. Поведението на родителя няма да се промени, но изображението ще започне да плава отдясно:

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

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