Поплавки или свойство обтекания(float)
Категории:Для начинающих
Теги: css, div, float
13-04-2010
“Поплавки” или как еще называется этот метод “обтекание блока“, служат для того что бы расположить блоки в 1 строку. Наглядный пример меню на моем блоге. Каждый пункт (обо мне, блог, портфолио и т.д.) создается с помощью блока div. Это не моя прихоть. Вы скажете, что сейчас все меню делаются списком, но тут уже все дело в плагине. Так сделано, что плагин сам создает меню на основе div’ов. Как тут быть, ведь все дивы будут становиться в столбик. Вот тут и приходит на помощь свойство float.
Float определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Когда значение параметра float равно none, элемент выводится на странице как обычно, самое большое — одна строка обтекающего текста может быть на той же линии, что и сам элемент.
Синтаксис
1 | float: left | right | none |
Аргументы
1 | left |
Выравнивает элемент по левому краю, а все остальные элементы, вроде текста, огибают его по правой стороне.
1 | right |
Выравнивает элемент по правому краю, а все остальные элементы огибают его по левой стороне.
1 | none |
Обтекание элемента не задается.
Данное свойство работает во всех браузерах.
Наведу небольшой пример. (по сути это css код моего блога. идентификатор для блока меню):
1 2 3 4 | #menu_items div{ float:left; padding-left:65px; } |
Теперь по-русски. Для всех блоков div находящихся в родительском блоке с идентификатором menu_items, которые создаются автоматически с помощью встроенного плагина, будут иметь обтекание по левому краю и отступ слева на 65px (внутренний). Таким образом, пока все, автоматически создаваемые блоки пунктов меню, будут помещаться в заданную ширину (у меня 995px) – они будут располагаться вряд. Это был пример, как все же поставить несколько блоков вряд. Но стоит заметить, что для 2-х, 3-х и больше колоночного сайта, с фиксированными размерами сайдбаров и резинового блока с контентом стоит использовать другие методы. Если Вас интересует, отпишитесь в комментариях – распишем подробней не бывает =)
Следующий пример. Как расположить текст справа или слева от картинки, что бы он обтекал ее? Да очень просто. Создаем картинку и для нее в нашем css файле определяем параметры свойства float на right или left, в зависимости от того, с какой стороны картинку должен обтекать текст. Если текст должен обтекать картинку справа – ставим float:left; слева – float:right;
Заметка:
Есть еще один маленький технический аспект, не обязательный для понимания всей “механики”. Заfloat’ить можно как блочные боксы, так и строчные. При этом строчные тут же автоматически становятся блочными. То есть, писать display:block; для float’а излишне.
Я купил себе отличный аппарат! А Вы хотите купить фотоаппарат canon, при чем один из лучших? Canon один из лучших брендов на рынке фотоаппаратов. Не стесняйтесь. Берит!
Похожие статьи:
