Почему нельзя задавать float:left всем блокам?

Question

[modfop]

Наткнулся на такой пункт в одном из постов Хабра.

Самое страшное, к счастью уже редкое — float: left для всех блоков. Безумный верстальщик эмулирует привычные ячейки таблиц, расставляя блоки как кирпичи друг за другом. Вон из профеcсии! Проверяется: Web Developer Outline → Float elements, если всё в красных блоках, вёрстку нужно выкидывать на помойку.

Может кто нибудь объяснить почему нельзя так делать, хочется все-таки знать.

Ссылка на пост (в Пункте №10, выделен жирным)

Answer 1

[Евгений Петров]

Это правда.

Расчёт блоков, выпадающих из нормального потока, но при этом влияющих на последующие, очень сложен и способен серьёзно нагрузить старые браузеры, вплоть до подтормаживания и кратковременного подвисания. Современные с такой проблемой сталкиваются в меньшей степени, но также потратят немало времени на reflow. А ресурсы ой как ещё пригодятся на другие задачи.

Вот вам пример сложности расположения плавающих элементов.

Вёрстка с большим количеством плавающих блоков крайне зависима от совпадения их размеров, появления блоков с clearence, значения overflow у предков и ряда других факторов, что делает её применимой только в очень жёстко ограниченных условиях.

С появлением flex использовать нестабильные плавающие блоки для построения колонок становится неразумным решением. Тем более, что flex не поддерживается только IE9 и ниже. Ну уж а inline-block гарантированно работает везде.

Кстати, особенно смешно наблюдать использование float для построения горизонтальных лент с расчётом с помощью JS итоговой ширины. А вот для обтекания текстом плавающие блоки могут и должны использоваться. Стоп. Так они же для этого и были придуманы:)

Comments

[modfop]

Да, спасибо. Очень подробно и ясно описали. Значит надо постараться обходиться только с inline-block и если нужен с позиционированием?

[Sergej]

@modfop position не отменяли)

[Евгений Петров]

@modfop любые правила нужны для решения своих задач. Я к тому, что position вроде не имеет отношения к обсуждаемой теме.

И написанное не значит, что float в качестве правила для 2-3 колонок категорически неприменим. Можно, хотя уже рекомендуется провести эксперименты с flex, а IE9 и ниже снабдить inline-block в файлике, подключаемом с помощью conditional comments.

Но тут речь скорее о бездумном применении float.

[modfop]

@sayber я в слове "позиционированием" имел ввиду position.

@Petroveg , ну, вообщем все яснее стало, спасибо. Только учусь, а учиться и узнавать мне надо оочень много)

[Sergej]

@modfop На тему flex, есть статья у mozilla https://developer.mozilla.org/en-US/docs/Web/Guide...

[Юрий Лобанов]

@modfop Вы бы отметили решенными вопросы. У Вас несколько вопросов и все не отмечены, а некоторые явно решены.

[modfop]

@iiil ok, sorry

[Евгений Петров]

@modfop так вопрос решён?

[modfop]

@Petroveg да, спасибо вам.

[Pavel Yakovlev]

Вы говорите загрузить и затормозить старые браузеры,но flex не поддерживается ниже ие9. О каких тогда старых браузерах речь?противоречие получается...

[Евгений Петров]

@Kith_Debeetham а причём float и поддержка flex?

[Дима Паутов]

Евгений Петров: а к сеткам это правило относится?

[Дима]

Хосспади, что вы несете?

[Zurab Shyvarbidze]

Дима Турков: поддерживаю, всеми так любимый юутстрап использует float'ы в сетке ...

Answer 2

[Назар Мокринский]

Ещё один голос в поддержку flex. Браузерами поддерживается хорошо, не имеет проблем float и inline-block (отступы могут появляться между блокам если есть пробелы между блоками в HTML коде).

Answer 3

[Константин Величко]

По тому что глупо симулировать таблицу из div.
Луше уж тогда верстать таблицей, а не выеживатся.
Флоатом нужно пользоваться с осторожностью, нужно отменять флоат. Если этого не происходит то блок схлопывается, а браузер может выдавать всякие финтиля.
Вообщем нехило снижается предсказуемость поведения верстки

Comments

[Евгений Петров]

Хмм... Если не устанавливать float, то и незачем убирать, не?:) Нет же ни одного плавающего элемента по умолчанию.

Answer 4

[Анна Бакурова]

Читала эту статейку и комменты к ней ещё давно, Я из неё вывела что float нужно использовать с умом а не так

* {
float: left
}

это типа они clfx заменили. Мне показалось, что автор про это. У inline-block минусов ничуть не меньше чем у float, так как он тоже не для того был придуман как его сейчас лепят где нужно и не нужно.
У нас эра flex и скоро мы про это забудем)))
Ещё как мне кажется автор не совсем верно говорить про !important - ну хоть ооочень редко но он нужен.