Дејство на флоати на родителот во CSS

Нека сега имаме див, во кој лежи слика. На див-от ќе му зададеме граница, а на сликата засега нема да и го зададеме својството 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;
}