- PVSM.RU - https://www.pvsm.ru -
Полгода назад я делал перевод статьи на Хабре Подробно о свойстве float [1]. В этот раз взглянем на него немного под другим углом. При разработке сайта мы часто используем float'ы для позиционирования некоторых блоков на странице, например сайдабара. Но так ли необходимо использовать float?
Float не всегда удобен: например при верстке сетки с изображением. Иногда уместно применять inline-block, который имитирует поведение float'а.
Обычная структура блочного элемента:
Inline-block — это значение, которые можно назначить свойству display. Название происходит от некоторых характеристик как строчного, так и блочного элементов.
Для борьбы с промежутками можно использовать несколько техник. Удаление пробелов в списках:
<ul>
<li>
one</li><li>
two</li><li>
three</li>
</ul>
Использование отрицательного значения margin:
nav a {
display: inline-block;
margin-right: -4px;
}
Странный способ с отсутствием закрывающего тега LI:
<ul>
<li>one
<li>two
<li>three
</ul>
Установка значения font-size на ноль:
nav {
font-size: 0;
}
nav a {
font-size: 16px;
}
Более подробно об этих способах можно прочитать в статье CSS-tricks [3].
Выбор между inline-block и float необходимо делать, исходя из решаемых задач в конкретном дизайне. В итоге все сводится к отличиям этих двух инструментов:
Такие сетки используются в фотогалереях. На этом примере можно хорошо проиллюстрировать поведение inline-block и float. Использование float оправдано, если изображения имеют одинаковую высоту. Если же высота отличается, то элементы могут отображаться криво:
Inline-block'и не имеют такой проблемы, потому что располагаются на одном уровне в строке. Поэтому для верстки галереи лучше подойдет inline-block:
Мы привыкли к использованию float для решения многих задач при верстке страниц. Однако иногда проще и удобнее применять inline-block. А иногда правильнее использовать старые добрые таблицы.
Использованные материалы и полезные ссылки по теме:
Автор: grokru
Источник [6]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/veb-dizajn/21946
Ссылки в тексте:
[1] Подробно о свойстве float: http://habrahabr.ru/post/142486/
[2] Посмотреть демонстрацию: http://koulikov.com/wp-content/uploads/2012/12/inline-block/
[3] статье CSS-tricks: http://css-tricks.com/fighting-the-space-between-inline-block-elements/
[4] Float vs. Inline-Block: http://www.ternstyle.us/blog/float-vs-inline-block
[5] Should You Use Inline-Blocks As A Substitute For Floats?: http://www.vanseodesign.com/css/inline-blocks/
[6] Источник: http://habrahabr.ru/post/161581/
Нажмите здесь для печати.