Жизнь без float

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

Почему не люблю это свойство?

Есть несколько причин. Например, для очистки всегда нужно использовать некий элемент со свойством clear, из-за чего код засорялся. Особенно страшно было на это смотреть, когда float подвергался список ul > li. Приходилось или добавлять в конец ещё один li с особым классом, или того страшнее span или div между последним li и закрывающим тегом ul (хотелось отрубить себе руку).

Ну и кто не сталкивался с неадекватным (как минимум по логике верстальщика) поведением браузера, который при нормальной, казалось бы, вёрстке шаблона в несколько колонок просто разрывал его и тогда, для лечения, призывался жуткий и прекрасный в своей жуткости .clearfix. Работу которого способны объяснить только шаманы 90лвл.

Собственно моё решение:

ul { display: block; font-size: 0; }
ul li { display: inline-block; }

Вот такой малюсенький трюк. Позицией, по правому/левому краю и по центру, очень легко управлять через text-align, поставить элементы в ровный ряд через vertical-align: top. При этом функцию clear выполняет сам родитель, который на отлично заканчивается с самым последним элементом.

Даже если речь идёт о вёрстке в несколько колонок, никаких преград для этого способа нету.

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

Автор: darkside