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

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

Статьи для сайтов!!!
Главная CSS по шагам Свойства CSS Clear Clip

Свойство clear

Описание

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

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

Значение

- left - отменяет обтекание элемента, смещенного влево с помощью свойства float,

- right - отменяет обтекание элемента, смещенного вправо с помощью свойства float,

- both - отменяет обтекание элемента, смещенного в любую сторону с помощью свойства float,

- none - отменяет действие свойства clear,

- inherit - принимает значение свойства родительского элемента.

Значение по умолчанию

- none


Пример

Пример 1 - Свойство float для элементов не установлено

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title> Свойство clear </title>
</head>
<body>

<p style="border:#0000FF solid 2px; width:200px; height:50px"> </p>
<p style="border:#0000FF solid 2px; background-color:#0099FF; width:50px; height:100px"> </p>
<p style="border:#FF00FF solid 2px"> Элементы (абзацы) расположены последовательно - друг под другом. </p>

</body>
</html>

При просмотре в браузере

Элементы (абзацы) расположены последовательно друг под другом.


Пример 2 - Для элементов установлено свойство float

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title> Свойство clear </title>
</head>
<body>

<p style="border:#0000FF solid 2px; width:200px; height:50px; float:left"> </p>
<p style="border:#0000FF solid 2px; background-color:#0099FF; width:50px; height:100px; float:right"> </p>
<p style="border:#FF00FF solid 2px"> Один блок смещен к левой стороне страницы, другой - к правой, а текст третьего блока обтекает их. </p>

</body>
</html>

При просмотре в браузере

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


Пример 3 - Для элементов установлено свойство float, и отменено обтекание одного из них при помощи свойства clear!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title> Свойство clear </title>
</head>
<body>
<p style="border:#0000FF solid 2px; width:200px; height:50px; float:left"> </p>
<p style="border:#0000FF solid 2px; background-color:#0099FF; width:50px; height:100px; float:right"> </p>
<p style="border:#FF00FF solid 2px; clear:left"> Один блок смещен к левой стороне страницы, другой - к правой, а текст третьего блока обтекает слева только правый блок, так как обтекание левого блока запрещено. </p>
</body>
</html>

При просмотре в браузере

Один блок смещен к левой стороне страницы, другой - к правой, а текст третьего блока обтекает слева только правый блок, так как обтекание левого блока запрещено


Свойство Caption-side Свойство Clear Свойство Clip
Свойства CSS
Дизайн сайтов
ПОИСК ПО САЙТУ:

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