www html, html уроки, html теги, css, верстка
Уроки книги по css и html урокам вопросы и ответы Помощь сайту дизайн-студия Шутовой Елены
Главная страница > Уроки > Верстка с помощью слоев > Плавающие элементы

Плавающие элементы

контентовая версия  

Плавающими будем называть такие элементы, которые обтекаются по контуру другими объектами web-страницы, например, контентом. Следует понимать, что никто и нигде не плавает, поэтому правильнее говорить «обтекаемые элементы», но с другой стороны термин «плавающий элемент» давно уже прижился, так что его и будем использовать в дальнейшем.

Плавающие элементы дастаткова активно применяются при верстке и в основном служат для воплощения следующих задач.

Все это выполняет один стилевой параметр float, а помогают ему в этом другие свойства. Хотя первоначально float не планировался на столь универсальную роль, но жизненные реалии расставили все по своим местам.

Обтекание картинок контентом

Есть разные способы, как объединять воедино контент и рисунки к нему. Обычно картинка выравнивается по левому или правому краю, а контент обтекает ее по контуру (рис. 1).

Рис. 1

Рис. 1. Обтекание фотографий контентом

Для подобного форматирования используется параметр align тега <IMG> со значением left или right. Чтобы создать промежуток между символами и краем Имаги к тегу <IMG> также добавляется параметр hspace для горизонтального отступа и vspace ? для вертикального (пример 1).

Пример 1. Использование параметра align

Валидный HTML

<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Плавающие элементы</title>
<body>

<p><img src="figure.jpg" width="120" height="87" align="left" hspace="5" vspace="5" alt="Картинка"></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>

</body>
</html>

Приведенный в данном примере способ, хотя и считается уже классическим, имеет тот недостаток, что отступ слева и справа задается одинаковым. Аналогично дело обстоит и с отступом сверху и снизу. Это связано с особенностью параметров hspace и vspace, поэтому вообще отказываемся от их услуг, отступы задаем через стилевой атрибут margin, а обтекание делаем с помощью float (пример 2).

Пример 2. Использование float

Валидный HTML
Валидный CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Плавающие элементы</title>
<style type="text/CSS (ЦСС)">
.figure {
 float: left; /* Выравнивание рисунка по левоой стороне */
 background: #d6d3a2; /* Цвет фона */
 padding: 4px; /* Поля вокруг картинки */
 margin:
  0 /* Отступ сверху */
  6px /* Отступ справа */
  4px /* Отступ снизу */
  0; /* Отступ слева */
}
</style>
</head>
<body>

<p><img src="figure.jpg" width="34" height="42" class="figure" alt="Картинка"></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>

</body>
</html>

В данном примере рисунок выравнивается по левоой стороне окна браузера путем использования значения left параметра float, а контент обтекает картинку по правому и нижнему краю. Цвет фона и поля вокруг Имаги предназначены для красоты и не являются обязательными.

Создание врезок

Врезкой имеется ввиду блок с рисунками и контентом, который встраивается в основной контент. Врезка обычно располагается по левому или правому краю контентового блока, а основной контент обтекает ее с других сторон (рис. 2).

Рис. 2

Рис. 2. Вид врезки

Чтобы врезка выделялась в контенте, у нее обычно устанавливают фоновый цвет и добавляют рамку. По своему виду врезки напоминают приведенный выше способ обтекания контентом картинки, поэтому код для разработки врезок практически идентичен предыдущему (пример 3).

Пример 3. Добавление врезки

Валидный HTML
Валидный CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Плавающие элементы</title>
<style type="text/CSS (ЦСС)">
.incut {
 float: left; /* Обтекание врезки по правой стороне */
 width: 100px; /* Ширина врезки */
 background: #fc0; /* Цвет фона */
 padding: 5px; /* Поля вокруг картинки */
 margin: 5px 10px 5px 0; /* Отступы вокруг рисунка */
 border: 1px solid #333; /* Параметры рамки */
}
</style>
</head>
<body>

<p class="incut">Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>

</body>
</html>

Результат примера показан на рис. 3.

Рис. 3

Рис. 3. Врезка, выровненная по левоой стороне

При создании врезок следует обязательно указывать ее ширину с помощью параметра width. Иначе размер слоя окажется гораздо шире, чем это требуется.

Расположение слоев по горизонтали

По умолчанию слои выстраиваются по вертикали один под другим, но при помощи свойства float их можно заставить располагаться рядом по горизонтали. При этом требуется установить ширину слоев и задать для них атрибут float, как показано в примере 4.

Поскольку для второго слоя также применяется обтекание, то добавленный ниже контент помещается справа от слоя. Избежать этого поможет параметр clear, он отменяет действие свойства float.

Пример 4. Создание двух колонок

Валидный HTML
Валидный CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Плавающие элементы</title>
<style type="text/CSS (ЦСС)">
.layer1 {
 width: 150px; /* Ширина первого слоя */
 background: #f0f0f0; /* Цвет фона */
 float: left; /* Обтекание по правой стороне */
}
.layer2 {
 width: 250px; /* Ширина второго слоя */
 background: #fc0; /* Цвет фона */
 float: left; /* Обтекание по правой стороне */
}
.layer1, .layer2 {
 padding: 7px; /* Поля вокруг контента */
 margin-bottom: 1em; /* Отступ снизу */
}
.layer3 {
 clear: both; /* Отменяем обтекание */
}
</style>
</head>
<body>
<div class="layer1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
<div class="layer2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
<div class="layer3">
Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat.
</div>
</body>
</html>

Результат примера показан на рис. 4.

Рис. 4

Рис. 4. Расположение слоев при использовании свойства float

Создание колонок при помощи float имеет ряд особенностей. Первая, как уже упоминалась, состоит в том, что после плавающих элементов требуется добавлять элемент со свойством clear, который выключает обтекание. Это необходимо в том случае, если предполагается использовать нижележащие слои. Вторая особенность связана с представлением плавающих слоев. Если окно браузера уменьшить до определенного предела, то слои перемещаются по вертикали (рис. 5).

Рис. 5

Рис. 5. Расположение слоев при уменьшении окна браузера

Существуют способы, как избежать подобного поведения слоев, но о них поговорим позже. Тема разработки многоколонного макета с помощью плавающих элементов дастаткова обширна и выходит за рамки этой Уроки.

Резюме

Плавающие элементы используются на web-странице обычно для того, чтобы установить вокруг объекта обтекание контента. В качестве таких объектов могут применяться рисунки или слои, содержащие Имаги и надписи. Для разработки обтекания предназначен стилевой атрибут float со значением left или right. Аргумент left выравнивает слой, к которому добавлен параметр float, по левоой стороне, а обтекание происходит по свободным сторонам, в том числе и левому краю. Значение right, наоборот, выравнивает слой по правой стороне.

Кроме такой очевидной ориентации плавающих элементов, с их помощью можно располагать слои по вертикали и таким образом формировать колонки. Хотя свойство float исходно не предназначалось на такую роль, создание многоколонного макета web-страницы на основе этого параметра дастаткова устоялось. Такой способ имеет некоторые недостатки, но их можно учитывать и применять в своих целях.

Статья опубликована: 15.02.2009 Последнее обновление: 01.05.2009
Поиск по сайту
Верстка с помощью слоев
Разделы
Теги по теме

DIV
Элемент DIV является блочным элементом и предназначен для выделения фрагмента объекта с целью изменения вида содержимого.

IMG
Тег IMG предназначен для отображения на web-странице рисунков в графическом формате GIF, JPEG или PNG.

P
Определяет контентовый параграф. Тег P является блочным элементом, перед ним всегда добавляется пустая строка, параграфы контента идущие друг за другом разделяются между собой вертикальным промежутком.

CSS (ЦСС) по теме

background
Параметр позволяет установить одновременно до пяти атрибутов стиля фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту.

clear
Параметр устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если установлено обтекание элемента с помощью параметра float, свойство clear отменяет его действие для указанных сторон.

float
Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон.

margin
Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента.

padding
Устанавливает значение полей вокруг содержимого элемента. Полем имеется ввиду расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.

width
Устанавливает ширину блочных или заменяемых элементов. Ширина не включает толщину границ вокруг элемента, значение отступов и полей.

Copyright 2009 Все права защищены

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект