Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Информационный Бестселлер на DVD или CD

Статьи для сайтов!!!
Главная Свойства CSS CSS по шагам Плавающие элементы Счетчики в CSS

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

Float Clear

Обтекание текстом
Расположение элементов по горизонтали
Отменяем обтекание


Элементы, к которым применено свойство float, получили название "Плавающие".

Свойство применимо ко всем элементам, кроме позиционированных.

Но не смотря на это свойство float совместно со свойством clear по своему влияют на позиционирование элементов на странице.

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

В основном плавающие элементы применяются при обтекании какого-либо объекта (рисунок, изображение, текст в рамке и т.д.) текстом.

Плавающий объект смещается влево или вправо (значения left и right свойства float соответственно), а текст располагается на свободной стороне. Но не обязательно текст: это может быть все что угодно.

Пример

Фрагмент кода:

<p> <img src="img/peng_64.gif"> </p>
<p>
Элементы расположены по умолчанию: содержимое первого абзаца (пингвин) расположен слева, а текст следующего абзаца начинается с новой строки. </p>

<p>
<img src="img/peng_64.gif" style="float:right;"> </p>
<p>
Теперь, как Вы видите, пингвин расположился справа, а текст следующего абзаца обтекает его слева. </p>

Результат:


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

Элементы расположены по умолчанию: содержимое первого абзаца (пингвин) расположен слева, а текст следующего абзаца начинается с новой строки.

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

Теперь, как Вы видите, пингвин расположился справа, а текст следующего абзаца обтекает его слева.


Значение none является значением по умолчанию для свойства float. При этом свойство никак себя не проявляет: элементы располагаются в привычном для всех порядке.

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

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

Рассмотрим пример, когда три абзаца необходимо разместить рядом друг с другом в горизонтальной плоскости. Естественно, содержимое абзацев может быть любым.

Напомним, что абзац (тег <p>) - это блочный элемент. И по умолчанию абзацы располагаются друг под другом.

Пример

Фрагмент кода:

<p style="border:#CC0033 solid 1px; padding:5px; width:185px; float:left;"> Первый абзац
</p>
<p style="border:#CC0033 solid 1px; padding:5px; width:185px; float:left; ">
Второй абзац
</p>
<p style="border:#CC0033 solid 1px; padding:5px; width:185px; float:left;">
Третий абзац
</p>
<p style="font-size
:18px;"> А это четвертый абзац. </p>

Результат:


Первый абзац

Второй абзац

Третий абзац

А это четвертый абзац.


Как видите, четвертый абзац обтекает расположившиеся в ряд абзацы: для третьего абзаца задано значение left свойства float и, следовательно, часть последующего текста располагается на свободной стороне - справа.

Но что делать, если необходимо чтобы в данном примере только три элемента располагались на одной строке? К тому же для содержимого четвертого абзаца явно не хватает места.

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

Но существует иной вариант...

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

Есть возможность отменить обтекание плавающего элемента.

Свойство clear вносит такую поправку.

Свойство применимо к блочным и плавающим элементам.

В нашем примере необходимо для четвертого абзаца свойству clear присвоить значение left, то есть отменить обтекание плавающего элемента (третьего абзаца), смещенного влево с помощью свойства float.

Пример

Фрагмент кода:

<p style="border:#CC0033 solid 1px; padding:5px; width:185px; float:left;"> Первый абзац
</p>
<p style="border:#CC0033 solid 1px; padding:5px; width:185px; float:left; ">
Второй абзац
</p>
<p style="border:#CC0033 solid 1px; padding:5px; width:185px; float:left;">
Третий абзац
</p>
<p style="font-size
:18px; clear:left;"> А это четвертый абзац. </p>

Результат:


Первый абзац

Второй абзац

Третий абзац

А это четвертый абзац.


Соответственно значение right свойства clear отменяет обтекание элемента, смещенного вправо с помощью свойства float, а значение both вносит запрет на обтекание элемента, смещенного в любую сторону с помощью свойства float.

Значение по умолчанию none отменит действие свойства clear.

Позиционирование. Слои Плавающие элементы Счетчики в CSS
CSS по шагам
Дизайн сайтов
ПОИСК ПО САЙТУ:

Моё имя Антон. Связаться со мною Вы можете по e-mail: averagev@mail.ru