В чем разница между flexbox и float?

В чем разница между flexbox и float

Историческая перспектива

Float — древний способ раскладки (1990е годы), созданный для обтекания текста вокруг изображений. Flexbox — современное решение (2015+) для одномерной раскладки элементов.

Float: Старый способ

Оригинальное назначение

/* Float был создан ДЛЯ ЭТО! */
img {
  float: left;
  margin-right: 20px;
}

/* Текст обтекает изображение */
/* \ текст текст текст
   |_| текст текст текст
       текст текст текст
 */

Использование float для раскладки (хак)

/* Люди начали использовать float для создания сеток */
.column {
  float: left;
  width: 48%;
  margin-right: 2%;
}

.column:last-child {
  margin-right: 0;
}

/* Проблема: нужно очищать float */
.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

Проблемы float

/* 1. Элемент выходит из потока */
.float-box {
  float: left;
  width: 200px;
  height: 200px;
  background: blue;
}

/* Родитель не знает размер floated элемента! */
.parent {
  /* height: 0; не помещает float-box */
}

/* 2. Нужна clearfix хакия */
.parent::after {
  content: '';
  display: table;
  clear: both;
}

/* 3. Сложно центрировать */
.center {
  float: left;
  position: relative;
  left: 50%;  /* Не работает! */
}

/* 4. Порядок в коде != порядок на экране */
/* Очень путанно */

Flexbox: Современное решение

Базовый синтаксис

.container {
  display: flex;  /* Волшебная строка! */
}

.item {
  /* Элементы автоматически выстраиваются */
}

Основные свойства Flexbox

.container {
  display: flex;
  
  /* Направление */
  flex-direction: row;        /* По умолчанию */
  /* flex-direction: column; */
  
  /* Выравнивание по главной оси */
  justify-content: center;    /* или space-between, space-around */
  
  /* Выравнивание по поперечной оси */
  align-items: center;        /* или flex-start, flex-end, stretch */
  
  /* Обёртывание */
  flex-wrap: wrap;            /* Элементы переносятся на новую строку */
  
  /* Зазор между элементами */
  gap: 20px;                  /* Работает! Никаких margin хаков */
}

.item {
  /* Сколько места занимает элемент */
  flex: 1;  /* Эквивалент flex-grow: 1; flex-shrink: 1; flex-basis: 0; */
  
  /* Или отдельно */
  flex-grow: 1;       /* Расширение */
  flex-shrink: 1;     /* Сжатие */
  flex-basis: 0;      /* Базовый размер */
}

Реальные примеры

/* Центрирование (одна строка!) */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* Меню */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo { flex: 0 0 auto; }
.nav-links { flex: 1; display: flex; gap: 20px; }
.search { flex: 0 0 auto; }

/* Адаптивная раскладка */
@media (max-width: 768px) {
  .container {
    flex-direction: column;  /* Вертикально на мобильных */
  }
}

Сравнительная таблица

Когда использовать

Float всё ещё нужен ДЛЯ:

/* Обтекание текста вокруг изображения */
.article-image {
  float: left;
  margin-right: 20px;
}

/* Да и только! */

Flexbox используй ДЛЯ:

/* Всё остальное */

/* Навигация */
.nav { display: flex; }

/* Карточка с содержимым */
.card { display: flex; flex-direction: column; }

/* Форма */
.form { display: flex; flex-direction: column; gap: 15px; }

/* Боковая панель + контент */
.layout { display: flex; gap: 20px; }
.sidebar { flex: 0 0 250px; }
.content { flex: 1; }

Практический пример: Трансформация float -> flexbox

/* ДО: Float */
.columns {
  overflow: auto;  /* clearfix */
}

.column {
  float: left;
  width: 48%;
  margin-right: 2%;
}

.column:nth-child(odd) {
  margin-right: 2%;
}

.column:nth-child(even) {
  margin-right: 0;
}

/* ПОСЛЕ: Flexbox */
.columns {
  display: flex;
  gap: 20px;  /* Просто и понятно! */
}

.column {
  flex: 1;  /* Равномерное распределение */
  /* Нет margin хаков */
}

Продвинутые возможности Flexbox

/* Горизонтальное и вертикальное центрирование */
.hero {
  display: flex;
  justify-content: center;   /* По горизонтали */
  align-items: center;       /* По вертикали */
  height: 100vh;
}

/* Распределение пространства */
.nav {
  display: flex;
  justify-content: space-between;  /* Максимум пространства */
}

/* Выравнивание элемента в конец */
.header {
  display: flex;
  align-items: center;
}

.logo { flex: 0 0 auto; }
.search { flex: 1; }  /* Занимает оставшееся место */
.user { flex: 0 0 auto; margin-left: auto; }

/* Контролирование размера */
.item {
  flex: 1;           /* Равный размер */
  /* или */
  flex: 2;           /* В два раза больше */
  /* или */
  flex-basis: 300px; /* Фиксированный размер */
}

Миграция с float на flexbox

// JavaScript для проверки поддержки
function supportsFlexbox() {
  const div = document.createElement('div');
  return 'flexGrow' in div.style;
}

if (supportsFlexbox()) {
  document.documentElement.classList.add('flexbox');
} else {
  document.documentElement.classList.add('no-flexbox');
}

// CSS fallback
.container {
  display: flex;  /* Moderne браузеры */
  
  /* Fallback для IE10 */
  display: -ms-flexbox;
  -ms-flex-direction: row;
}

Заключение

Float создавалась для обтекания текста и больше не должна использоваться для раскладки.

Flexbox — правильный инструмент для одномерной раскладки в современном веб-разработке. Это стандарт, поддерживаемый всеми браузерами, начиная с IE 11.

Если тебя спрашивают о float на интервью в 2024 году, скорее всего это вопрос на историческую перспективу и понимание эволюции CSS.