float

[Arinden]

Здравствуйте. Хотел поинтересоваться касательно использование свойства float. Дело в том, что в интернете вижу постоянно статьи о том, что люди вообще не используют данное свойство при вёрстке своих макетов, а у меня вот с точность до наоборот. Я использую float чаще, чем любое другое свойство. И не могу понять, как можно по другому. Пытался найти статьи в интернете не особо что нашёл. Но вот представим ситуацию сайта, состоящего из трёх колонок. Каждой колонке я присваиваю свойство float: left; чтобы отобразить их рядом, плюс к блокам внутри левой колонки свойства флоат, для техже целей. В конечной счёте получается, что float установлен абсолютно для всего и я правда не понимаю как можно написать сайт и не использовать свойство флоат.

P.S. Часто мне приходится применять float по аналогии с футером. Пока не поставлю float - блок вообще летает не понятно где.

Edited February 23, 2012 by Arinden

[psywalker]

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

Главное, о чём стоит помнить, это не то, что и для чего нужно, а то, что подходит лучше в той или иной ситуации. "Таблицы или дивы?" - это наиглупейший вопрос.

А в твоём примере я вообще не понял, что это будет такое? Нужно смотреть картину в целом. Нарисуй или покажи похожий, уже готовый пример.

[Arinden]

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

[psywalker]

Да не вопрос. Три такие фикс колонки свободно можно сделать на флоатах, в контейнере с очисткой потока. А внутри уже делай чё хош)

Да, и высоту конеша нахер убрать надо бы.

[Vin]

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

"Чек-лист вёрстки. Что можно отдавать клиенту, а что надо переделывать"

Во float, конечно, нет ничего плохого, но если это действительно не эмуляция полностью табличной вёрстки c прижатием всех блоков в одну сторону.

[Arinden]

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

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

Типа так? Удалил все флоаты, заменил на position: absolute; Неужели так лучше?

Edited February 24, 2012 by Arinden

[DImas95]

Вот можете почитать о флоатах здесь

[buddah]

Есть простой способ, которому я следую. Флоат - для главной структуры колонок (в большинстве своем)

В меню, или в отображении товаров или в галлереях, то есть в более мелких деталях, для которых нужно сделать так чтоб они следовали друг за другом, я чаще всего использую inline-block.

Absolute используется только там, где на 100500 процентов есть уверенность, что тот элемент будет именно там и нигде больше.

Еще реже я использую table-cell для табличного поведения.

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

Но нет ничего более удобного, если нужно обтекание текстом например какого либо элемента.

Edited February 25, 2012 by buddah

[Vin]

Arinden, плохо имитировать ячейки таблицы во всём макете и жать всё в одну сторону. А вот, скажем, если в хедере есть логотип слева и главное меню справа, что мы делаем? Лого прижимаем влево, а меню — вправо. Или, например, боковые колонки: одну жмём влево, другую — вправо, центральную не делаем плавающей, а задаём ей отступы, чтобы осталось место для сайдабаров. Пример:

http://seodon.ru/primery/html-css/makety-sajtov/trehkolonochnye-rezinovye-makety.php#two

Edited February 25, 2012 by Vin

[Arinden]

Вот можете почитать о флоатах здесь

Спасибо, изучим..

я чаще всего использую inline-block.

Прописываете это свойство для каждого блока?

Или, например, боковые колонки: одну жмём влево, другую — вправо, центральную не делаем плавающей

А если у меня сайт пиксель-перфект? Без резины. В чём разница задам я центральной колонке флоат лефт к левой колонке, которая в свою очередь флоат лефт к врапперу или задам ей position? =\

[buddah]

Прописываете это свойство для каждого блока?

Непонятна суть вопроса. Только там где нужно. Это все свойства css и каждое надо использовать по надобности.

[Vin]

А если у меня сайт пиксель-перфект? Без резины. В чём разница задам я центральной колонке флоат лефт к левой колонке, которая в свою очередь флоат лефт к врапперу или задам ей position? =\

Месье знает толк в тонких извращениях ©. Нет, серьёзно: если сайт полностью фиксированный, то тут как раз можно использовать float: left, в ряде случаев даже очень нужно. Но вот зачем тут position? В ие6-7 всё поплывёт (далеко не все могут позволить полностью забить на пользователей этих браузеров) и в случае, если нужно будет внести изменения в макет, это сулит острую головную боль.

[Arinden]

Непонятна суть вопроса. Только там где нужно. Это все свойства css и каждое надо использовать по надобности.

Я имею ввиду, что приходится использовать display: inline-block; с той же переодичностью, что и float.

Месье знает толк в тонких извращениях ©. Нет, серьёзно: если сайт полностью фиксированный, то тут как раз можно использовать float: left, в ряде случаев даже очень нужно. Но вот зачем тут position? В ие6-7 всё поплывёт (далеко не все могут позволить полностью забить на пользователей этих браузеров) и в случае, если нужно будет внести изменения в макет, это сулит острую головную боль.

про position я имею ввиду, что это предлагается, отчасти, как альтернатива float. в том то и дело, что то, что я делал - это n-ное количество блоков, фиксированного размера, которые располагаются в строгой последовательности. И получается, что именно для этого случая можно использовать флоат. Учитывая информацию по вашей ссылке - это иногда и единственный выход.

Сейчас сделал простейшую форму с использование display: table-cell; вместо float. Это правильнее?

[buddah]

Я имею ввиду, что приходится использовать display: inline-block; с той же переодичностью, что и float.

Случайно + тебе поставил.

С какой еще такой периодичностью? Хватит мыслить шаблонно. Сайты как и люди - все разные.

Как мне кажется, твоя главная проблема в том, что ты выискиваешь какие-то закономерности, общее правило, подходящее для всего и всех. Нету такого. Тогда весь интернет был бы одинаковым.

Так же думали архитекторы в СССР.

Edited February 25, 2012 by buddah

[Vin]

про position я имею ввиду, что это предлагается, отчасти, как альтернатива float. в том то и дело, что то, что я делал - это n-ное количество блоков, фиксированного размера, которые располагаются в строгой последовательности.

Как раз фишка метода в том, что один элемент может отличаться по высоте от другого. Да, в таком случае это как раз хорошая альтернатива inline и inline-block, особенно для старых браузеров. Ну а позиционирование нужно, когда другими методами сделать невозможно или затруднительно. Относительно простые вещи, витрина интернет-магазина или фотогалерея, для которых отлично подходят другие методы, незачем делать с помощью позиционирования.

Учитывая информацию по вашей ссылке - это иногда и единственный выход

Можно на "ты"

Сейчас сделал простейшую форму с использование display: table-cell; вместо float. Это правильнее?

Правильнее для чего? Формы можно делать по-разному. Простейшую форму можно сделать на обычных блоках, сложную — на таблицах. Блочные таблицы (display: table-cell, display: table, display: table-row) нужны для того, не использовать таблицы (table, tr, td) для нетабличных данных: к примеру, если нужны колонки одинаковой высоты или нужен фиксированный центральный блок с двумя резиновыми блоками по бокам. Опять же, увы, не работает для IE6-7.

Edited February 25, 2012 by Vin

[Arinden]

Случайно + тебе поставил.

С какой еще такой периодичностью? Хватит мыслить шаблонно. Сайты как и люди - все разные.

Как мне кажется, твоя главная проблема в том, что ты выискиваешь какие-то закономерности, общее правило, подходящее для всего и всех. Нету такого. Тогда весь интернет был бы одинаковым.

Так же думали архитекторы в СССР.

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

Правильнее для чего? Формы можно делать по-разному. Простейшую форму можно сделать на обычных блоках, сложную — на таблицах. Блочные таблицы (display: table-cell, display: table, display: table-row) нужны для того, не использовать таблицы (table, tr, td) для нетабличных данных: к примеру, если нужны колонки одинаковой высоты или нужен фиксированный центральный блок с двумя резиновыми блоками по бокам. Опять же, увы, не работает для IE6-7.

Чёрт, только что это заметил. Рано радовался на тему display: table-cell; открыл в IE-7 и "обрадовался". Тогда в чём смысл использования display: table-cell; вместо таблицы, если это не кроссбраузерно?

[Vin]

Чёрт, только что это заметил. Рано радовался на тему display: table-cell; открыл в IE-7 и "обрадовался". Тогда в чём смысл использования display: table-cell; вместо таблицы, если это не кроссбраузерно?

Ну, раньше и другие св-ва css не были кроссбраузерны. Кое-где уже отказываются от поддержки IE7, а кое-где IE6 поддерживают по полной — всё зависит от статистики аудитории и выгоды от поддержки/отказа от поддержки. Хотя, конечно, это историческое недоразумение, что в 2012-м году надо поддерживать браузер 2001-го года выпуска.

Edited February 25, 2012 by Vin

[Arinden]

Кое-где уже отказываются от поддержки IE7, а кое-где IE6 поддерживают по полной — всё зависит от статистики аудитории и выгоды от поддержки/отказа от поддержки. Хотя, конечно, это историческое недоразумение, что в 2012-м году надо поддерживать браузер 2001-го года выпуска.

Да ко мне тоже закрадывается желание отказаться от поддержки out of date браузеров. А за использование IE-6 нужно вообще уголовную ответственность вводить.

[Arinden]

Вот. Взгляните - я накидал на скорую руку пример блока со смешанным контентом внутри (я сделал всё дивами, но в айди присвоил название того тега, который там может быть, просто песочница неточно отображает размеры инпута, текстарии и сабмит баттона). Размеры взял как получилось, но на деле всё должно быть пиксель перфект. Тоесть расстояние, например, между картинкой и текстарией должно быть не ажбы какое, а скажем ровно 10 пикселей (не могу кстати понять, если задаю display: inline-block; - получается отступ в 4 пикселя, и чтобы его убрать нужны хаки, а с флоат - вообще ничего не надо). Для реализации данного примера мне понадобилось проставить свойство флоат абсолютно для всего. Вот о чём я и говорил. И если делать сайт дальше, то ничего не меняется, десятки и сотни флоатов везде. Научите меня пожалуйста на данном примере, как можно реализовать это профессионально и правильно. Табличную вёрстку прошу не предлагать, идёт отторжение . Edited February 25, 2012 by Arinden

[psywalker]

Arinden, Борь, я бы так сделал. И откажись от дурной привычки, ставить всем id!

[sigma77]

psywalker,

А я в последнее время практически отказалась от очистки потока overflow: hidden (только когда гарантировано не будет элементов, которые должны быть за его пределами)

[psywalker]

psywalker,

А я в последнее время практически отказалась от очистки потока overflow: hidden (только когда гарантировано не будет элементов, которые должны быть за его пределами)

Ты имеешь ввиду то, что я сделал в .content {}?

[sigma77]

psywalker,

ага

[psywalker]

psywalker,

ага

А как ты тогда создаёшь новый контекст форматирования? И как делаешь резину, две-три колонки, средняя тянущаяся?

[sigma77]

psywalker,

марджины, clearfix, в зависимости от ситуации inline-block или float