Свойство float изначально придумывалось совсем для другой задачи — чтобы обтекать текстом картинку, вставленную посреди абзаца, примерно как в газетной верстке. Но много лет именно float был основным способом создавать многоколоночные макеты, потому что ничего лучше на тот момент не существовало.
Проблема float в том, что он выключает элемент из нормального потока документа лишь частично — соседние элементы обтекают его, но родительский контейнер при этом может "не заметить" высоту плавающих потомков и схлопнуться до нулевой высоты, если внутри нет ничего, кроме float-элементов.
Решали эту проблему через clearfix — специальный CSS-приём с псевдоэлементом after, который принудительно заставлял контейнер учитывать высоту плавающих потомков. Это работало, но было скорее обходным путём, чем настоящим решением задачи колоночной вёрстки.
Flexbox и Grid убрали саму необходимость в такого рода хитростях. Колонки теперь создаются прямым и понятным способом — через display flex с направлением в строку или через display grid с нужным количеством колонок, без побочных эффектов вроде схлопывания высоты родителя.
Сегодня float остаётся уместным именно в том сценарии, для которого создавался изначально — обтекание текстом небольшого изображения внутри статьи. Для построения структуры страницы или сетки карточек современные инструменты подходят значительно лучше.
Если в проекте встречается старый код на float, его почти всегда можно безопасно переписать на Flexbox или Grid, и итоговый CSS обычно становится короче и понятнее, чем исходный вариант с обходными путями.
История float и причины перехода на современные инструменты раскладки разобраны в статье про свойство float на MDN.
