О практических применениях свойства float

[Mushtat]

Я, полностью разобравшись в особенностях float'a, перестал им пользоваться. Как раз по причине, что над большинством проектов работаю не я один, и после меня ещё люди. Надоело объяснять, честно говоря. Теперь пользуюсь в основном:

tag {
display:inline-block;
vertical-align:top
}

А всё, что после эелементов вместо clear'a делаю display:block; (зачастую просто div или section)

[PaulZi]

Только омрачает использование inline-block необходимость хаков для ie7 (zoom:1; display: inline;) и необходимость учитывать пробельные символы между элементами. А так действительно применять inline-block, особенно для горизонтальных меню, удобнее.

[infinius]

Проблему с хаками решает любой препроцессор. Например, у меня в стайлусе:

display(type)
    if type is inline-block
        display: inline-block
        zoom 1
	*display inline
    else
        display: arguments

В общем, остаются беды с пробелами.

[PaulZi]

Я предпочитаю для ie7-8 использовать conditional comments.
Особой беды от пробелов не вижу, главное знать о ней и правильно прописать шаблоны. На крайний случай можно вставить комментарии вместо пробелов:

<div class="inline-block">
   ...
</div><!--
--><div class="inline-block">
   ...
</div><!--
--><div class="inline-block">
   ...
</div>

В этом случае не надо прописывать font-size:0

[infinius]

Для HTML я тоже использую препроцессор (Jade). Там с этим беда, так что приходится ловить font-size.

[develop3r]

да, ну как отказатся от читабельной структуры хтмл кода :)

[example]

habrahabr.ru/post/137582/ — вот тут уже всё решено.
Не всякий backend-разработчик поймёт, зачем там пустые комменты, или почему бы не перенести на новую строку.
ps. С Днём программиста всех ;)

[infinius]

Как раз для отдельного файла стилей, Роман Комаров сегодня выложил миксин дял стайлуса.
То есть вы пишете в основном файле стилей:

.foo
    box-shadow: 0 0 3px #000
    border: 1px solid #000 if ie

И правило про красные бордеры попадает в style_is.css

[bolk]

Замените div на span и inline-block будет работать в IE7

[frost_lab]

Но иногда зачастую внутри должен быть другой див или большое их количество, т.ч. это не выход.

[infinius]

Какое-то время тоже пользовался. Но.

.page-constrain {
    font-size: 0;
    display: inline-block; zoom: 1; display: inline;
}
/* И это если всё же существуют внутренние элементы */
.page-constrain * {
    font-size: ...;
}

Такие вещи действительно упрощают код? Есть ещё какие-то беды, сходу не вспомню.
То есть вам легче было было объяснить, что после двух узких блоков нужно ставить

 <div style="display: block;"></div>

, вместо

<div style="clear: block;"></div>

?

[infinius]

clear: both, конечно

[develop3r]

хочу с вами не согласиться, во первых:
элементу с класом page-constrain не надо давать font-size: 0;, нужно именно родителю записать font-size: 0;;
во вторых:
вы написали — То есть вам легче было было объяснить, что после двух узких блоков нужно ставить <div style="display: block;"></div> ето не подходить если ширина элемента с классом rightColumn позволить элементу с классом block3 обтекать два узких

[infinius]

.page-constrain — это родитель у меня в данном примере.
То, что вы написали дальше, я, к сожалению, не могу разобрать.

[develop3r]

То есть вам легче было было объяснить, что после двух узких блоков нужно ставить

<div style="display: block;"></div>

, вместо

<div style="clear: both;"></div>

Извените, я подошел к примеру более общее.

То есть я хотел сказать, что ваш пример не подходить, если ширина элемента с классом rightColumn позволить элементу с классом block3 обтекать два узких желтых (в моем примере) блоков

[frost_lab]

Флоат там, где он к месту — это вполне нормально,
однако бесят люди, которые повсеместно используют

.blablabla {float: left; width: 100%;}

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

[infinius]

Автор зря не упомянул, что любой пример с overflow: hidden ломается, как только нужно вставить блок, вылезающий за рамки.
В том же последнем примере нельзя добавить всплывающее меню.

[develop3r]

так вы правы, но я привел еще два рабочих примеры

[example]

Не люблю я float. Стараюсь использовать только по назначению, когда картинке необходимо обтекание текстом.
Для всего остального стараюсь найти оптимальный способ pos: absolute + display: inline-block;

[develop3r]

почти полностью с вами согласен, зато иногда без

 float 

не обойтись, я считаю, что следует взять за правило окучивают хотя бы один плавающий блок оборачивать эментом с правилом:

overflow: hidden

или

display: table-cell

или же использовать известный метод clearfix.

[develop3r]

извините за граматику:

почти полностью с вами согласен, зато иногда без

float 

не обойтись, я считаю, что следует взять за правило обертывать хотя бы один плавающий блок элементом с правилом:

overflow: hidden

или

display: table-cell

или же использовать известный метод clearfix.

[example]

Clearfix — это как само собой разумеющееся для float.
Overflow опять же используется только по назначению (например, для скрытия последующий слайдов в слайдере, для ограничения высоты блока и прикручивания к нему скролла), а не чтобы косяки float выправлять.
Особое исключение ИМХО для overflow: cssing.org.ua/2010/04/26/overflow-hidden/

[bO_oblik]

Для примера с меню достаточно display: inline

[example]

а для «12» можно вообще тэги не писать. Но что-то мне подсказывает, что смысл не в этом. А вот в чём, я не могу понять

[develop3r]

дело в том что в коде сначала идет 2, затем 1, а в результате 1, а затем 2. Этот пример демонстрирует что зафлоаченого элемента обтекают предыдущие строчные элементы.

[develop3r]

для пунктов (li) — согласен, но для элемента (ul) нам нужен

float: left;

чтобы ограничить его ширину до ширины контента, и действием правила

overflow: hidden;

спрятать border-ры

[csmile]

Использование float для целей layout это в общем-то грязный хак и весьма не рекомендуется. Собственно как и других штук типа zoom:1.

Некоторые проблемы Дэйвид Барон описал в своей статье. Со своей стороны хочу отметить что floats очень тяжелы для динамических изменений. При изменении float элемента пересчитывается layout всего BFC (block formatting context), в общем случае это весь документ.

Если уж надо горизонтальное размещение то на выбор: display:inline-block, display:table-cell или display: flexbox со товарищи (если религия проекта позволяет)

[Goobs]

Век живи, век учись. Трюк с бордерами и отрицательными отступами утащил в копилку, спасибо.
Очищение потока — та еще шляпа, когда приходится доделывать за горе-верстальщиками. clear:both в таком случае подобен брошенной на страницу гранате)
Приходится за компанию флоатить и все остальное. Хорошо, когда удается победить малой кровью — float:left; width:100%;
Обычно быстро и легко не получается, а виной всему первоначальный макет.

[maddogrts]

не имеем кроссбраузерную поддержку :first-child

А где не поддерживается :first-child?

[develop3r]

я имел в виду общую поддержку этих селекторов…

[maddogrts]

не имеем кроссбраузерную поддержку :first-child, :last-child, а использование каких либо выражений, тем более скриптов для IE — запрет

А написали по другому, но не суть. Для вашего меню логичнее использовать кроссбраузерный селектр :first-child чем отрицательные отступы.

[develop3r]

но нам нужна замена селектора :last-child чтобы скрыть последний правий border.

[maddogrts]

www.top-world-casino.ru/casino-belorussia/ попробуйте вот так вот

[develop3r]

можно и так, спасибо…