Нужно ли здесь использовать float?

245

12 июля 2017, 23:02

Посоветуйте, как правильно сверстать такой сайт, приведённый на рисунке?
Интересует вопрос, нужно ли применять здесь float для блоков в шапке и вообще по всему сайту?
т.е. там где логотип, телефон, кнопка перезвонить, корзина, они должны обтекать с помощью float, или тут правильней применить flex?
Также и по контенту и выравнивание товаров интересует, что тут применять: float или flex ? Как расположить контейнеры aside и content ? Можно ли сделать такой сайт полностью на flex? и правильно ли будет такое решение?
Также нужно предусмотреть адаптив

Answer 1

Хороший вопрос. Последний раз я пробовала верстать прямо полностью на флексах где-то полгода назад, и тогда по кроссбраузерности они себя показали так себе. И, насколько я поняла, если нужно поддерживать IE, то от флексов стоит воздержаться, по-крайней мере не делать на них полностью весь шаблон. И тестить, часть свойств может косячно работать.

Остальное - дело вкуса и момента.

Я обычно комбинирую inline-box и float. Что из них лучше выбрать - вопрос контекста.

Например, адаптивный сайт. Лого должно быть выровнено четко по левому краю на декстопе, а корзина - по правому краю (по ширине контента). Между ними - строго по центру идет меню сайта с n-м кол-вом пунктов, причем со временем их может становиться больше или меньше. А на планшете лого и корзина уходят вверх, тогда как меню опускается ниже. Тут будет логично выравнивать меню и корзину через float (по правому и левому краю соответственно), менюхе задавать display: inline-block, а всей шапке в целом text-align:center.

Или, использовать флексы, если мы не боимся проблем в IE.

Вот очень крутой пример витрины магазина на флексах. http://html.innova-media.ru/product_list/index.html

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

Одним словом - ответ на Ваш вопрос - комбинировать решения, в зависимости от задачи блоков и их поведении при адаптации. В идеале еще подумать о будущем сайта, например, что если добавится еще пункт меню, что если контента aside станет меньше/больше, это поможет лучше сориентироваться в выборе способа позиционирования.