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

overflow: hidden; или overflow: auto;: Применяется к родительскому элементу элемента(-ов) с float. Создает новый блочный контекст форматирования (BFC), заставляя родителя включать обтекающие элементы в свою высоту.
Ситуация: Простейший способ, когда нужно скрыть содержимое, выходящее за границы элемента, или применить прокрутку, но также работает как метод клиринга.

clear: both;: Применяется к элементу, который не должен обтекать предыдущие элементы с float. Этот элемент будет располагаться ниже всех обтекающих элементов.
Ситуация: Когда нужно создать новую строку или секцию после элементов, которые обтекают друг друга.

Метод clearfix (псевдоэлементы ::after): Добавляет псевдоэлемент к родительскому контейнеру с определенными свойствами, имитируя поведение clear: both;, но без необходимости добавлять лишние HTML-элементы.

.clearfix::after {
    content: ""; /* Обязательный контент для отображения псевдоэлемента */
    display: table; /* Создает новый блочный контекст, как и overflow: hidden; */
    clear: both; /* Применяет очистку */
}

Ситуация: Самый распространенный и рекомендованный способ клиринга, который является чистым и не нарушает разметку. Применяется к родительскому элементу, содержащему обтекающие элементы.

Использование display: flex или display: grid: Современные методы макетирования, которые не требуют обтекания для расположения элементов, тем самым устраняя необходимость в клиринге.
Ситуация: При построении сложных макетов или когда требуется более гибкое управление расположением элементов.

Добавление дополнительного элемента с clear: both; (старый метод): Вставляет пустой HTML-элемент после обтекающих элементов и применяет к нему clear: both;.
Ситуация: Считается устаревшим и нежелательным подходом, так как добавляет избыточный HTML.