Как работают плавающие элементы (floats) в CSS?

Плавающие элементы вырываются из нормального потока документа и сдвигаются влево или вправо. Другие элементы обтекают их.

Особенности:

• Сдвиг: Элемент с float: left; сдвигается влево, все следующие элементы обтекают его справа. Элемент с float: right; сдвигается вправо, остальные элементы обтекают его слева.
• Высота контейнера: Изначально родительский контейнер не учитывает высоту плавающих потомков, что может приводить к "схлопыванию".
• Ширина: Плавающий элемент становится блочным и его ширина определяется его содержимым, если явно не задана.
• margin: Можно использовать margin для создания отступов вокруг плавающего элемента.
• clear: Свойство clear предотвращает обтекание. clear: left; запрещает обтекание элемента слева, clear: right; справа, clear: both; с обеих сторон. Typically applied to an element after the floated elements.

Пример использования float и clear:

<div class="container">
  <img src="image.jpg" alt="Float Me" class="float-left">
  <p>Этот текст будет обтекать изображение.</p>
  <div class="clear"></div> <!-- Очистка обтекания -->
  <p>Этот текст будет ниже изображения.</p>
</div>

.float-left {
  float: left;
  margin-right: 10px; // Отступ справа
}

.clear {
  clear: both; // Очистка обтекания
}

Методы очистки обтекания (кроме clear):

• Overflow: Добавление overflow: hidden; или overflow: auto / scroll; родительскому элементу заставляет его учитывать высоту плавающих потомков.
• Псевдоэлемент ::after: Более современный и гибкий метод.

.container::after {
  content: "";
  display: table; // Или block
  clear: both;
}