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

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

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

Наприклад, блок можна притиснути до лівого або правого краю, а текст навколо нього буде обтікати цей блок.

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

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

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

Додаємо float до блоку

Тепер додамо блоку child властивість float: left. Блок переміститься ліворуч, а текст почне його обтікати.

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

• float: left притискає елемент до лівого краю.
• float: right притискає елемент до правого краю.
• Інший контент починає обтікати плаваючий елемент.
• Float виводить елемент зі звичайного потоку документа.

.child {
  float: left;
}