float в теории и на практике

Стилевое свойство float изначально было внедрено в CSS для создания обтекаемых картинок и текстовых врезок, но со временем расширило сферу своего применения. Веб-разработчикам не хватало инструментов для вёрстки макетов, таблицы же для этих целей оказались громоздки, неудобны и морально устарели. На смену таблицам для вёрстки колонок приспособили float, несмотря на то, что это свойство не предназначено для этой роли. Зато оно достаточно универсальное и поддерживается всеми браузерами. При этом использовать float временами сложно, поскольку у него есть ряд неприятных особенностей и они могут привести к тому, что макет просто «рассыпется». К тому же float не является интуитивно понятным и на его работу оказывают воздействие другие свойства, вроде overflow, которые напрямую с float не связаны.

Несмотря на эти ограничения float достаточно активно применяются при вёрстке веб-страниц и служит для реализации подобных и не только задач:

  • обтекание картинок текстом;
  • создание врезок;
  • горизонтальные меню;
  • галерея фотографий;
  • двух и трёхколоночные макеты.

Сейчас на смену float пришли более прогрессивные системы вёрстки, но при этом float до сих пор встречается в разных CSS-фреймворках, вроде Bootstrap 3.

Влад Мержевич

Веб-разработчик, автор нескольких книг, посвящённых созданию сайтов, HTML и CSS. Кандидат технических наук.