Школа
Веб-разработка

Типовые решения в вёрстке. Почему не стоит использовать float

14 мая 2020
👁 8779   🗩2
Веб-разработка

Типовые решения в вёрстке. Почему не стоит использовать float

14 мая 2020
👁 8779   🗩2
Юрий Мазурский
Разработчик и дизайнер
Полезно
 11
11
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

Типовые решения в вёрстке

Типовые решения в вёрстке

Изначально язык ХТМЛ не предполагал сложную раскладку элементов на веб‑страницах. Большинство страниц представляли собой линейный текст вперемежку с изображениями. Но верстальщики нашли разные способы преодолеть это техническое ограничение и стали использовать таблицы и свойство float, чтобы делать многоколоночные шаблоны страниц.

Верстальщики разделились на два лагеря — любителей таблиц и флоатов (я себя относил скорее ко второму). Таблицы не были оптимальным вариантом, потому что содержимое таблицы не показывалось, пока таблица не просчитывалась полностью. Таким образом, страницы, которые были свёрстаны исключительно таблицами, могли отображаться на экране гораздо позже, чем страницы, свёрстанные с помощью float. Сложные страницы, состоящие из таблиц сложнее рефакторить, флоаты гораздо гибче. При этом верстать таблицами намного проще. Вёрстка флоатами — по своей сути хак и больше похожа на секретное знание, которое трудно объяснить другому человеку.

С тех пор язык ХТМЛ значительно эволюционировал и стал отвечать современным требованиям. Появились специальные инструменты для раскладки элементов, выстраивания колонок и многого другого.

Необходимость использования float отпала. Я советую никогда не использовать флоаты для раскладки элементов на странице, их время прошло. Как и раскладки таблицами.

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

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Полезно
 11
11
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

Кроме float для раскладки ещё использовался display:inline-block, который и сейчас частенько используется. Причём inline-block с добавлением пары строчек работал в Internet Explorer 6, впрочем как и float.

Вот пример, где флоат используется при добавлении отступов внутри контейнера со скролом:
https://stackoverflow.com/…‑padding‑when‑overflowing

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы