Справочник по CSS : Тематический указатель : Справочник по свойствам и атрибутам : Расположение и границы : clear

Материал из Справочник Web-языков

Содержание

1 Атрибут clear | Свойство clear
2 Синтаксис
3 Возможные значения
4 Замечания
5 Примеры
6 Стандарты
7 Поддерживаемые браузеры
8 Ссылки на источники

Атрибут clear | Свойство clear

Это свойство устанавливает с каких сторон запрещено обтекание объекта.

Синтаксис

HTML	{ clear : sClear }
Скрипты	[ sClear = ] object.style.clear[ = v ]

Возможные значения

sClear: Строка, которая может определять и принимать одно из следующих значений:

none	Значение по умолчанию. Обтекание объекта запрещено с обеих сторон.
left	Запрещено обтекание с левой стороны. Объект будет располагаться выше любых других элементов, обтекающих его с левой стороны.
right	Запрещено обтекание с правой стороны. Объект будет располагаться выше любых других элементов, обтекающих его с правой стороны.
both	Запрещено обтекание элемента и с левой, и с правой сторон. Рекомендуется устанавливать это значение для свойства, когда точно неизвестно с какой стороны будет обтекание объекта.

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

Замечания

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

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

Примеры

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

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

<STYLE>
    I { clear:left }
</STYLE>

Во втором примере используется свойство clear для изменения местоположения параграфа текста по отношению к обтекаемому элементу.

<HEAD>
<SCRIPT>
function fnClear(){
    oClear.style.clear="left";
}
function fnClear2(){
    oClear.style.clear="none";
}
</SCRIPT>
</HEAD>

<BODY>
    <img src="/workshop/graphics/sphere.jpg" style="float:left">
    <SPAN ID="oClear">
        <P>This is an example of the clear attribute.<P>
    </span>

    <P>
        <INPUT TYPE=button value="clear = left" onclick="fnClear()"> 
        <INPUT TYPE=button value="clear = none" onclick="fnClear2()">
    </P>
</BODY>