Властивість float і декілька блоків у CSS

Властивість float і декілька блоків у CSS

Властивість float можна застосовувати одразу до декількох блоків. У такому випадку вони будуть розташовуватися поруч один з одним.

Якщо кілька елементів мають float: left, вони шикуються в ряд зліва направо відповідно до порядку в HTML-коді.

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  some long text
</div>

.parent {
  border: 1px solid red;
  text-align: justify;
}

.child {
  float: left;
  width: 200px;
  height: 100px;
  border: 1px solid green;
}

Використання float: right

Якщо змінити float: left на float: right, блоки будуть притискатися до правого краю контейнера.

При цьому порядок блоків візуально зміниться: елемент, який знаходиться нижче в HTML, буде ближче до правого краю.

.child {
  float: right;
  width: 200px;
  height: 100px;
  border: 1px solid green;
}

• Декілька блоків з float: left стають в один ряд.
• Порядок left відповідає порядку в HTML.
• float: right змінює напрямок розташування блоків.
• Якщо місця недостатньо, блоки можуть перейти на новий ряд.

.child {
  float: left;
}