Какие методы запрета обтекания (clearing) вы знаете и где они применяются?

• clear: both;: Самый распространённый и надёжный метод. Применяется к элементу, который должен располагаться ниже всех предыдущих плавающих элементов. Это может быть отдельный пустой элемент или один из элементов макета.
• Добавление пустого элемента с clear: both;: Иногда используется для гарантированного сброса обтекания, особенно при работе со сложными макетами. Это пустой div или другой блочный элемент.
• Псевдоэлемент :after с clear: both;: Более современный подход. Применяется к контейнеру плавающих элементов. Создает "виртуальный" элемент после последнего содержимого контейнера, тем самым сбрасывая обтекание внутри.

/* Пример использования псевдоэлемента :after */
.container::after {
  content: ""; /* Обязательное свойство для псевдоэлементов */
  display: table; /* Часто используется для лучшей совместимости */
  clear: both;
}

• overflow: hidden; или overflow: auto;: Применяется к контейнеру плавающих элементов. Создает новый блочный контекст форматирования, который "очищает" обтекание внутри себя. Однако, это может обрезать содержимое или создать полосы прокрутки, если содержимое выходит за границы контейнера.
• Блочный контекст форматирования (BFC): Все вышеперечисленные методы, кроме явного пустого элемента, так или иначе создают новый BFC, что и приводит к сбросу обтекания. Свойства, создающие BFC:
  • float (ненулевое значение)
  • overflow (значение, отличное от visible)
  • display: inline-block
  • position: absolute или fixed
  • display: flow-root; (сравнительно новый, явно создает BFC)

Таблица сравнения методов:

Где применяются:

• Для того, чтобы элемент после плавающих элементов начинал отображаться под ними.
• Для того, чтобы контейнер, содержащий только плавающие элементы, не схлопывался по высоте.
• В сложных макетах для контроля потока документа вокруг плавающих элементов.