Float в CSS

Мы уже рассматривали вопрос, каким образом можно сделать так, чтобы картинка обтекалась текстом. А можно ли сделать, чтобы видео обтекалось текстом?

Для обтекания видео текстом мы используем те же приемы, которые применяли для того, чтобы картинка обтекалась текстом. А точнее, мы воспользуемся CSS-свойством float.

CSS-свойство float

Float в переводе с английского – плавать, всплывать, поплавок. Свойство float делает элемент плавающим (перемещаемым). Float перемещает элемент к нужному краю веб-страницы (в зависимости от присвоенного значения), при этом содержимое веб-страницы, расположенное ниже плавающего элемента, смещается вверх (до уровня верхней границы элемента) и плавно обтекает плавающий элемент.

Свойство float применимо к любому элементу (кроме абсолютно позиционированных) и может иметь следующие значения: left | right | none | inherit.

float: left – элемент сдвигается влево и обтекается другими элементами справа;

float: right – элемент сдвигается вправо и обтекается другими элементами слева;

float: none (по-умолчанию) – элемент не обтекается другими элементами;

float: inherit – элемент наследует значение родителей.

Для отмены свойства float с соответствующей стороны используется свойство clear, которое может иметь значения none | left | right | both | inherit.

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

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

И так, допустим, у нас есть ролик, который нужно разместить на веб-странице слева. Справа ролик должен обтекаться текстом.

Таким образом, нам нужно создать блок, поместить в блок ролик, затем в CSS прописать стиль для блока, указав все необходимые параметры. Приступим:

1. Создаем блок и помещаем в блок ролик.

Для выделения фрагмента (блока) в документе в  HTML служит элемент <div>
<div>…</div>

<div>
<object width="340" height="260" data="images/player/uppod.swf" type="application/x-shockwave-flash"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="flashvars" value="comment=Том и «Джерри»&amp;st=/images/styles/video83-896.txt&amp;file=/images/video/cat-on-vacuum-cleaner.flv" /><param name="src" value="images/player/uppod.swf" /></object>
</div>

2. В CSS прописываем стиль для блока.

Сначала добавляем класс стиля к блоку – селектору div даем имя .obektleft. Добавляем свойства float и padding. Свойство <float> отвечает за выравнивание элемента по определенному краю, с обтеканием его остальными элементами с других сторон. Свойство <padding> отвечает за поля вокруг элемента. Открываем файл с расширением .css, в котором прописаны стили и прописываем стиль для нашего блока:

div.obektleft {

float: left;

padding: 12px 12px 12px 0;

}

3. Теперь применим класс class="obektleft" к тегу <div> в файле HTML. Открываем статью в исходном коде и прописываем класс для блока с видео:

<div class="obektleft">
<object width="340" height="260" data="images/player/uppod.swf" type="application/x-shockwave-flash"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="flashvars" value="comment=Том и «Джерри»&amp;st=/images/styles/video83-896.txt&amp;file=/images/video/cat-on-vacuum-cleaner.flv" /><param name="src" value="images/player/uppod.swf" /></object>
</div>

И вот, что у нас получилось.

Таким образом, мы выровняли видео по левому краю с обтеканием текста по его правой стороне и установив поля вокруг элемента: сверху - 12px, справа - 12px, снизу - 12px, слева - 0px. Теперь, чтобы таким же образом выровнять любой элемент веб-страницы, нам нужно поместить его в блок div и присвоить ему созданный класс стиля.