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 прописать стиль для блока, указав все необходимые параметры. Приступим:
- Создаем блок и помещаем в блок ролик.
Для выделения фрагмента (блока) в документе в 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=Том и «Джерри»&st=/images/styles/video83-896.txt&file=/images/video/cat-on-vacuum-cleaner.flv" /><param name="src" value="images/player/uppod.swf" /></object>
</div>
- В CSS прописываем стиль для блока.
Сначала добавляем класс стиля к блоку – селектору div даем имя .obektleft. Добавляем свойства float и padding. Свойство <float> отвечает за выравнивание элемента по определенному краю, с обтеканием его остальными элементами с других сторон. Свойство <padding> отвечает за поля вокруг элемента. Открываем файл с расширением .css, в котором прописаны стили и прописываем стиль для нашего блока:
div.obektleft {
float: left;
padding: 12px 12px 12px 0;
}
- Теперь применим класс 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=Том и «Джерри»&st=/images/styles/video83-896.txt&file=/images/video/cat-on-vacuum-cleaner.flv" /><param name="src" value="images/player/uppod.swf" /></object>
</div>
И вот, что у нас получилось.
Таким образом, мы выровняли видео по левому краю с обтеканием текста по его правой стороне и установив поля вокруг элемента: сверху - 12px, справа - 12px, снизу - 12px, слева - 0px. Теперь, чтобы таким же образом выровнять любой элемент веб-страницы, нам нужно поместить его в блок div и присвоить ему созданный класс стиля.