Деловање флоатова на родитеља у ЦСС-у

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