floatПобутує думка, що CSS float — це щось дуже застаріле, а його використання вважається ледь не богохульством. Ну бо для лейауту ж маємо і flex, і grid. І частково з цим можна погодитись — для лейауту це дійсно моветон.Але й в епоху свого розквіту цей підхід теж був не best practice, а банальним костилем через відсутність притомних інструментів.Справжнє ж призначення float просте як дрова — відтворювати типографський принцип "обтікання" зображення текстом. І все.Принцип дії також не складний — float-елемент приклеюється до лівого або правого краю контейнера, а будь-який наступний вміст бравзер намагатиметься відобразити поруч із ним. На "новий рядок" наступний вміст перенесеться з однієї з трьох причин: текстовий вміст досягне нижньої межі float-елементу, блочний елемент не вміщатиметься в доступну ширину, або ж якийсь із наступних елементів матиме відповідний clear.У сучасній верстці використання float цілком собі виправдане. Але, як завжди, за умови одного суттєвого "але" — для відтворення друкарських принципів. Для створення лейауту, як уже зазначалося вище, є спеціальні інструменти.Чого ж тоді його взагалі використовували для цих задач? Це були темні часи. Таблиці впали в немилість, сходила зірка CSS 2.1, дизайнери вигадували нові, досі небачені структури сторінок, але над усим цим бовваніла одна величезна проблема — стандарти досі сприймали html-сторінки як документи, а не як інтерактивний інтерфейс для взаємодії з вебом.Тому веброзробники зробили те, що у них виходить найкраще — вигадали новий костиль. Головною фішкою float є те, що він може виставити декілька блокових елементів в один ряд, якщо у них є ширина, та ще й без додаткових обгорток, якими по суті були таблиці. Тобто зробити їх колонками. Тож дивовижний світ веброзробки став ще дивовижнішим, і інтернет заполонили легіони сайтів із багатоколонковою структурою.Однак усе не було таким райдужним, як уявлялося. Навіть простенький лейаут на дві колонки міг несподівано розʼїхатись, якщо сумарна ширина колонок виходила бодай на нанопіксель більшою за 100%. Рахувати і прописувати ширини колонок потрібно було вручну, і розробники часто йшли безпечним шляхом, недотягуючи до 100%. Особливо підступним це було для трьох рівноширинних колонок. 33.33% — це найкраще, що ми могли запропонувати світу.Є проблеми й окрім цього — наприклад, батьківський контейнер за замовчанням не підхоплює висоту float-елементів. І для вирішення цієї проблеми зʼявилися нові хаки: так званий clearfix, чи танці з overflow.З іншого боку оця вся чудасія з float та спроби на їх основі будувати гнучкі й динамічні лейаути стали одним із чинників, що врешті призвели до появи flex, а згодом і до grid. Саме в епоху float зʼявилися CSS-фреймворки, які принесли у розробку поняття "12-колонкова сітка", що стала основою для макетів безлічі сайтів, і де-факто золотим стандартом дизайну.Отут можна глянути як воно працює.Якщо ви в очі не бачили float, і верстаєте виключно з flex та grid, ставте 🔥, ну а як ви такі самі динозаври, як і я, та провели не одну безсонну ніч, намагаючись зверстати той самий "священний Ґрааль", то ставте ❤️ і не забудьте випити таблетки від тиску ;)Що почитати:MDN — floatMDN Learn — floatsЩо почитати душнілам:W3C — CSS 2.1 FloatsW3C — CSS Display Module [email protected]. Квитки на нову "Співбесіду на сцені" скоро здорожчають. Заберіть вже.