Дзеянне флоатаў на бацькоўскі элемент у 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;
}

Атрымліваецца, што элементы, якiм зададзена ўласцівасць float, не пашыраюць свайго бацькі па вышыні.

Давайце ўласцівасці float замест left напішам значэнне right. Паводзіны бацькі не зменяцца, але відарыс пачне плаваць справа:

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

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