Всем привет, меня зовут Анна Блок и сегодня мы поговорим о разнице между Float, Flexbox и Grid. Также разберем, когда их уместнее всего использовать в CSS и возможно ли смешивать эти свойства для позиционирования элементов?

Начнем с определений и короткой истории.

Float

Float — это свойство, которое позволяет определить по какой стороне будет выравниваться элемент. При этом остальные элементы будут обтекать объект со свойством Float с других его сторон. Используя float у вас есть возможность выбрать две стороны выравнивания — с правой стороны (right), либо с левой (left). Чтобы отменить позиционирование, для этого достаточно прописать float: none;

Уместнее всего использовать float для обтекания картинки текстом. Однако, не так давно было принято верстать практически все на флоатах. Те, кто верстает уже более 3-х лет, наверняка, помнят, довольно распространенный метод верстки меню. Чтобы установить пункты меню в линию, каждому li присваивался float left или right для того, чтобы они шли друг за другом.

Пример:

В чем минус использования Float?

Как я и сказала, все соседние блоки, стремятся стать обтекаемыми. Следовательно, чтобы избавиться от этого, требуется постоянно создавать лишний элемент в документе, которому бы присваивалось свойство clear: both;

Давайте рассмотрим на примере.

Здесь мы видим блоки, которые следуют друг за другом. Но у нас стоит задача: последний блок должен начинаться со следующей строчки. Чтобы это условие выполнялось, необходимо добавить блок с классом clear и стиль clear: both;

Flexbox CSS

На смену всем известным флоатам приходит Flexbox CSS. Он не был так широко известен, несмотря на то, что появился еще в 2011 году.

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

Сейчас на данный момент ситуация кардинально изменилась. Flexbox CSS поддерживается всеми современными браузерами и не только. Верстальщики, которые перешли с флоатов на флексы почувствовали, что верстать стало гораздо быстрее и, что самое главное, приятнее.

В чем преимущества Flex?

Прежде всего то, что многие популярные задачи можно было решить буквально в пару строчек CSS-кода, с использованием минимальной разметки HTML.

Давайте рассмотрим пример:

В этом примере мы видим родительский блок с классом box и дочерние элементы, которые окрашены в зеленый цвет и имеют ширину/высоту 100px. Чтобы поставить их в ряд, необходимо всего лишь установить display:flex;

Если нам необходимо установить блоки по центру, то мы можем установить justify-content:center здесь же. В случае с float, такая реализация была бы невозможна (без костылей).

Если наша цель растянуть один единственный блок и заполнить его по всей ширине контента, то мы можем добавить класс child для конкретного блока, например, четвертого и установить для него свойство flex-grow: 1;

Чтобы ознакомиться со всеми свойствами Flexbox CSS, вы можете воспользоваться наглядной интерактивной шпаргалкой по всем свойствам. Обязательно держите ее под рукой, когда будете верстать сайт.

Grid CSS

Теперь давайте поговорим о новейшем направлении в верстке — Grid CSS. На мой взгляд, это результат переработоки всего того, с чем веб-разработчики встречались в течении 15-ти лет. Многие задачи решались методами, которые не предназначались для этого.

Напомню, float используют для фиксирования и обтекания соседнего блока, однако это не мешало в своё время использовать это свойство для верстки всего сайта. Можно сказать, что раньше намеренно пользовались костылями, потому что другой альтернативы не было.

Grid CSS предоставляет новые возможности:

• Раскладка учитывает горизонтальное и вертикальное пространство одновременно;
• Можно смело изменять раскладку, не затрагивая разметку;
• Требуется минимальное количество медиазапросов, чтобы адаптироваться по свободному пространству.

Flex CSS в свою очередь не может располагать элементы одновременно вдоль нескольких осей. С ним вы можете работать только в одномерном пространстве, а с Grid CSS — в двухмерном.

Если вы только начинаете своё изучение этого направления, то я рекомендую пройти игру Grid CSS Garden. А для вёрстки сайтов используйте интерактивную шпаргалку по Grid.

Давайте рассмотрим простой пример использования Grid:

В этом примере мы видим простейшую разметку, где есть родительский блок с классом grid и дочерние — с классом grid-item. Для реализации такой сетки нам потребовалось использовать 4 свойства из раздела Grid CSS.

Вместо заключения

Итак, мы выяснили, в каких случаях уместнее использовать Float, Flexbox и Grid, но возможно ли их смешение? Давайте разберемся.

Если вы начали, например, использовать display:flex, то конечно же писать там свойства, которые относятся к Grid неуместно. Это неправильно.

Однако, если в одной части страницы блок выполнен полностью из Flexbox, а далее вам потребуется в следующем блоке сделать картинку, которая будет обрамляться текстом, то будет правильным использовать float.

Пример:

Не забывай задавать свои вопросы по вёрстке или фронтенд разработке у профессионалов на FrontendHelp в режиме онлайн.

Смотреть видео: