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

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

Содержание

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

[править] Атрибут float | Свойство styleFloat

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

[править] Синтаксис

HTML	{ float : sFloat }
Скрипты	[ sFloat = ] object.style.styleFloat

[править] Возможные значения

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

none	Значение по умолчанию. Объекты отображаются в том же порядке, как они идут в тексте.
left	Текст обтекает объект с правой стороны.
right	Текст обтекает объект с левой стороны

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

[править] Замечания

Если для свойства объекта заданы значения left или right, то он интерпретируется как блочный объект. Следовательно, для него свойство display будет игнорироваться.

Объекты, которые следуют за обтекаемым объектом, располагаются в соответствии с заданными свойствами обтекания.

Обтекаемый объект перемещается влево или вправо до тех пор пока не достигает границ (bodrer, margin, padding) другого блочного объекта.

Если для объектов div и span задана ширина, то они будут отображаться при использовании атрибута float. В Microsoft Internet Explorer 5 для таких объектов ширина задана по умолчанию, и объекты отображаются в любом случае.

[править] Примеры

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

В первом примере используется атрибут float для задания с какой стороны от текста будут располагаться два рисунка (sphere.jpg будет находиться слева, а cone.jpg справа).

<img src="sphere.jpg" style="float:left">
<img src="cone.jpg" style="float:right">

Во втором примере используется свойство styleFloat для того, чтобы картинки поменялись местами при наведении курсора мыши на кнопку.

<IMG ID=oSphere SRC="sphere.jpeg" STYLE="float:left">
<IMG ID=oCone SRC="cone.jpeg" STYLE="float:right">
:
<BUTTON onmouseover="oSphere.style.styleFloat='right'; 
    oCone.style.styleFloat='left'"
    onmouseout="oSphere.style.styleFloat='left'; 
    oCone.style.styleFloat='right'">
    Flip-flop images.
</BUTTON>