Дзеянне флоатаў на бацькоўскі элемент у CSS

Хай цяпер у нас ёсць дыў, у якім ляжыць відарыс. Дыву зададзім мяжу, а відарысу пакуль не будзем задаваць уласцівасць float.

Давайце паглядзім, як гэта будзе выглядаць у браўзэры:

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

cssdiv {
  border: 1px solid red;
}

Результат:

Цяпер давайце ўсталюем відарысу ўласцівасць float у значэнні left. У гэтым выпадку адбудзецца дзіўная рэч - вышыня бацькі знікне, яго ніжняя мяжа будзе пачынацца адразу пасля верхняй, а відарыс вылезе знізу за свайго бацьку:

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

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

Результат:

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

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

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

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

Результат: