Различия между float и flex
1. Элементы с разной высотой не рушат вёрстку
На примере ниже показано, как будут выглядеть элементы со свойством float: left, если высота одного элемента выше, чем у других.
Элементы со свойством display: flex постоянно будут идти друг за другом, даже если у элементов разная высота.
2. Элементы можно выровнять по середине
Элементы с float: left всегда выводятся с левого края, а элементам display: flex можно выровнять также по середине или с правого края.
3. Элементы не выходят за пределы родительскго блока
При использовании float: left, вёрстка рушится, из-за чего приходится использовать различные способы для корректного вывода элементов, например добавляя класс «clearfix». При использовании display: flex элементы выводятся без ошибок в вёрстке.
4. Вёрстка не рушится при изменении окна браузера
При использовании float: left к боковой панели сайта, то при изменении размера браузера, контент может перенестись под боковую панель. При использовании display: flex, боковая панель и контент будут постоянно расположены «на одной линии» в любом размере браузера.