Вступ до властивості float у CSS

Вступ до властивості float у CSS

Властивість float використовується для того, щоб елемент міг бути притиснутий до лівого або правого краю, а інший контент обтікав його.

Найчастіше float використовували для розташування зображень у тексті, коли текст повинен обтікати картинку.

Приклад без float

<div>
  <img src="img.png" alt="">
  some long text
</div>

div {
  width: 400px;
  text-align: justify;
}

float: left

Значення left притискає елемент до лівого краю, а текст починає обтікати його справа.

img {
  float: left;
}

float: right

За допомогою значення right можна притиснути елемент до правого краю, а текст буде обтікати його зліва.

img {
  float: right;
}

Основні значення float

• float: left — елемент плаває зліва.
• float: right — елемент плаває справа.
• float: none — стандартне значення, без обтікання.

Практичне завдання

img:first-child {
  float: left;
}

img:nth-of-type(2) {
  float: right;
}