Различия между float и flex

1. Элементы с разной высотой не рушат вёрстку

На примере ниже показано, как будут выглядеть элементы со свойством float: left, если высота одного элемента выше, чем у других.

Элементы со свойством display: flex постоянно будут идти друг за другом, даже если у элементов разная высота.

2. Элементы можно выровнять по середине

Элементы с float: left всегда выводятся с левого края, а элементам display: flex можно выровнять также по середине или с правого края.

3. Элементы не выходят за пределы родительскго блока

При использовании float: left, вёрстка рушится, из-за чего приходится использовать различные способы для корректного вывода элементов, например добавляя класс «clearfix». При использовании display: flex элементы выводятся без ошибок в вёрстке.

4. Вёрстка не рушится при изменении окна браузера

При использовании float: left к боковой панели сайта, то при изменении размера браузера, контент может перенестись под боковую панель. При использовании display: flex, боковая панель и контент будут постоянно расположены «на одной линии» в любом размере браузера.