Какие техники очистки float существуют и когда какую применять?

Базовое понимание

Проблема: родитель не охватывает float-детей. Решения эволюционировали.

Техники

1. Пустой элемент <div style="clear:both"> — устарело.
2. Clearfix (::after { clear: both }) — легаси-кодбазы.
3. overflow: auto/hidden — создаёт BFC, но режет overflow.
4. display: flow-root — современный явный BFC.
5. Уйти с float на flex/grid — лучший вариант для новой вёрстки.

.wrapper { display: flow-root; }

Float сегодня почти только для обтекания текста картинкой, не для сеток страницы.

Итог

Новый код — flex/grid/flow-root. Clearfix — поддержка старья. Не плодите clearfix в 2020-х без нужды.