Что такое float и для чего он используется

Question

Что такое float и для чего он используется

Тип вопроса: CSS Вероятность: 10% Категория: Frontend Разработчик

Ответ

Float – это CSS-свойство, которое вырывает элемент из обычного потока документа и прижимает его к левому или правому краю родителя. Текст и другие inline-элементы обтекают такой элемент.

Пример:

img {
  float: left;
  margin-right: 10px;
}

Особенности:

Элемент с float выпадает из потока, что может ломать вёрстку
Родительский элемент схлопывается, если не применить clearfix
Для очистки обтекания используют clear: both или современные методы вроде display: flow-root

Минусы:

Устаревший подход для построения сеток (лучше flex/grid)
Может вызывать проблемы с выравниванием и позиционированием

Сейчас float в основном используют для обтекания текстом изображений, а не для вёрстки макетов.

Ответ 18+ 🔞

Слушай, вот есть такая штука в CSS — float. Это как взять картинку или блок, и пиздык — выдернуть его из общего строя, из потока, понимаешь? И прилепить к левому или правому краю родителя. А всё остальное — текст там, какие-то мелкие элементы — начинают его, сука, обтекать, как вода камень.

Вот смотри, как это выглядит в коде:

img {
  float: left;
  margin-right: 10px;
}

Картинка прилипла слева, а текст справа от неё аккуратненько, с отступом, течёт. Красота, да?

Но тут, блядь, есть нюансы, ёпта:

Элемент с float — он как будто сбежал из системы. Выпал из общего потока. И родительский контейнер, дурачок, про него забывает, схлопывается, будто его там и не было. Классика жанра, пиздец.
Чтобы заставить родителя опомниться и снова увидеть своё дитя, надо делать так называемый clearfix. Либо старый дедовский способ — ставить после clear: both, либо современный — display: flow-root на родителя. Без этого — полный пиздец с вёрсткой.

А теперь главное, блядь, запомни:

Float — это не для сеток! Это как пытаться забить гвоздь микроскопом. Для сеток и колонок уже лет десять как есть Flexbox и Grid. Float для них — это как ездить на работу на динозавре.
Сейчас эту штуку используют в основном по её прямому, историческому назначению — чтобы текст обтекал картинки. Всё. Не выёбывайся, не строй на нём лейауты, а то получишь такую головную боль, что мало не покажется, в рот меня чих-пых.