Css grid vs flexbox vs float?

Question

[coi1751]

Изучаю html+css, в скором времени начну изучение js. Хочу узнать ваше мнение, стоит ли использовать float в своей верстке, или можно уже переходить на flexbox и css grid?

Answer 1

[Павел Корнилов]

float нужно изучить, там всего пара правил.
flexbox уже скоро будет признан кроссброузерным, но это время еще не наступило.

Comments

[SelenIT3]

Привет гостю из прошлого! Браузеры без поддержки флексбоксов с долей больше полупроцента — в студию!

[SelenIT3]

Кто поставил плюс этой дезинформации? Флексбоксы работают в 98% браузеров, включая мобильные (даже в Опере Мини). А флоаты и неизбежные при верстке на них "клирфиксы" — одна из самых сложных, недоспецифицированных и потенциально багоопасных областей в CSS.

[Павел Корнилов]

SelenIT3, SelenIT3, а диапазон версий вы уже не учитываете?
У меня, к примеру, в мобиле довольно старый хром стоит, без поддержки. Не все в крупных городах живут.

[SelenIT3]

Именно хром, не "Android Browser"? Во-первых, он в любом случае поддерживает старую реализацию (`display:-webkit-box` и т.п.). Во-вторых, такие версии хрома уже музейная редкость, независимо от величины города, и стремительно вымирают, случайно купить новый телефон с таким хромом уже нереально.

[Павел Корнилов]

SelenIT3, да я не спорю про new versions. Говорю про стек старых броузеров. Погуглите, какой процент юзверей пользуют броузеры, не реализующие флекс?
Просто у большого количества пользователей техника довольно старая, и обновлять ее они не собираются в ближайшем. Прекратите холивар на тему "нужно оббновляться". Мы пишем для людей, а не для технологий.

[Programmir]

Хватит уже пользоваться старой версией эксплорера. Переходи на более современные браузеры.

[Павел Корнилов]

Programmir, а что, есть что-то современнее IE-8 ??? O_o
Я-то перейду, заставь остальных.

[Павел Корнилов]

Programmir, да, почитал твои ответы... https://toster.ru/user/Programmir/answers
NO comments.

[SelenIT3]

KorniloFF, глобальный процент «юзверей» браузеров, не поддерживающих флексбоксы ни в каком виде — три с небольшим. В рунете — того меньше. Именно потому, что мы пишем для людей, большинство не должно страдать из-за причуд крошечного меньшинства с антикварным софтом, получая ненадежную костыльную верстку вместо надежной и быстрой.

[Павел Корнилов]

SelenIT3, ну, возможно вы и правы. Собственно, у меня у самого сайт флексы использует. Но глобально на них я пока переходить не буду. Подожду еще с полгодика. Куда нам спешить? =)

Answer 2

[SelenIT3]

Смотрите по задаче и предполагаемой аудитории. Если аудитория — чисто гики с новыми браузерами, то смело делайте на гридах с фолбэком на одноколоночный мобильный вариант (как советуют здесь). Если для широкой аудитории с пренебрежимой долей IE9- — делайте на флексбоксах. Если для госконторы, Китая или еще какой-то специфической аудитории с большой долей старых IE — лучше перестраховаться и сделать на флоатах. Но это именно исключение, для типичных случаев флексбоксы сегодня — золотая середина.

P.S. Всё вышесказанное — именно про раскладку блоков страницы. По прямому назначению (обтекание элементов текстом внутри блоков) флоаты по-прежнему актуальны (особенно в сочетании с новыми возможностями типа shape-outside).

Answer 3

[xXRustamXx]

Уже поддерживается всеми браузерамы, за исключением IE11(пиздюк) там частисная поддержка flexbox, ссылка caniuse.com/#feat=flexbox

Answer 4

[Анатолий]

можно уже переходить на flexbox

Не можно, а нужно. Bootstrap 4 разрабатывается на flexbox, так что делайте выводы :)

Answer 5

[ValeraValera]

все зависит от того , какие браузеры нужно поддерживать
caniuse.com/#search=float
caniuse.com/#feat=flexbox
caniuse.com/#search=grid