Что такое "свободное перемещение" в CSS?
С помощью свободного перемещения CSS, элемент может быть прижат влево или вправо, и позволяет другим элементам обернуться вокруг него.
Свободное перемещение очень часто используется для изображений, но оно также полезно при работе с макетами.
Как элементы перемещаются
Элементы перемещяются горизонтально, это означает, что элемент может перемещяться только влево или вправо, а не вверх или вниз.
Плавающий элемент будет двигаться так далеко влево или вправо, как он может. Обычно это означает все пути к левой или правой части содержащего элемента.
Элементы после плавающего элемента будут окружать его.
Элементы до плавающего элемента не влияют.
Если изображение перемещается вправо, следующий за ним текст обтекает его слева:
Пример 1
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
img { float:right; }
</style>
</head>
<body>
<p>В параграфе ниже, мы добавили изображения со стилем <b>float:right</b>.
В результате изображение свободно плавает вправо в параграфе.</p>
<p>
<img src="/images/xhtml-css.png" width="130" height="102" />
Это некоторый текст. Это некоторый текст. Это некоторый текст.
Это некоторый текст. Это некоторый текст. Это некоторый текст.
Это некоторый текст. Это некоторый текст. Это некоторый текст.
Это некоторый текст. Это некоторый текст. Это некоторый текст.
Это некоторый текст. Это некоторый текст. Это некоторый текст.
Это некоторый текст. Это некоторый текст. Это некоторый текст.
Это некоторый текст. Это некоторый текст. Это некоторый текст.
Это некоторый текст. Это некоторый текст. Это некоторый текст.
Это некоторый текст. Это некоторый текст. Это некоторый текст.
Это некоторый текст. Это некоторый текст. Это некоторый текст.
</p>
</body>
</html>
Свободное перемещение элементов рядом друг с другом
Если поместить несколько плавающих элементов друг за другом, они будут плавать рядом друг с другом, если есть место.
Здесь мы представляем галерею изображений с использованием свойства float:
Пример 2
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.thumbnail {float:left; width:110px; height:140px; margin:5px;}
</style>
</head>
<body>
<p>Попробуйте изменить размер окна, чтобы посмотреть, что происходит, когда изображения не имеют достаточно места.</p>
<img class="thumbnail" src="/images/tiger1.png" width="107" />
<img class="thumbnail" src="/images/tiger2.png" width="107" />
<img class="thumbnail" src="/images/tiger3.png" width="107" />
<img class="thumbnail" src="/images/tiger4.png" width="107" />
<img class="thumbnail" src="/images/tiger1.png" width="107" />
<img class="thumbnail" src="/images/tiger2.png" width="107" />
<img class="thumbnail" src="/images/tiger3.png" width="107" />
<img class="thumbnail" src="/images/tiger4.png" width="107" />
</body>
</html>
Отключение перемещения - с использованием Clear
Элементы после плавающего элемента будут течь вокруг него. Чтобы избежать этого, используйте свойство clear.
Свойство clear определяет, c какой стороны элемента других плавающие элементы не допускаются.
Добавте текстовую строку в галерею изображений, используя свойство clear:
Пример 3
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.thumbnail
{
float:left;
width:110px;
height:140px;
margin:5px;
}
.text_line
{
clear:both;
margin-bottom:2px;
}
</style>
</head>
<body>
<h3>Галерея изображений</h3>
<p>Попробуйте изменить размер окна, чтобы посмотреть, что происходит, когда изображения не имеют достаточно места.</p>
<img class="thumbnail" src="/images/tiger1.png" width="107">
<img class="thumbnail" src="/images/tiger2.png" width="107">
<img class="thumbnail" src="/images/tiger3.png" width="107">
<img class="thumbnail" src="/images/tiger4.png" width="107">
<h3 class="text_line">Вторая строка</h3>
<img class="thumbnail" src="/images/tiger1.png" width="107">
<img class="thumbnail" src="/images/tiger2.png" width="107">
<img class="thumbnail" src="/images/tiger3.png" width="107">
<img class="thumbnail" src="/images/tiger4.png" width="107">
</body>
</html>
Больше примеров
Пример 4
Пусть изображение свободно перемещающегося вправо в параграфе. Добавим границу и поле к изображению.<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
img
{
float:right;
border:1px dotted black;
margin:0px 0px 15px 20px;
}
</style>
</head>
<body>
<p>
В следующем параграфе, изображение плавает в правую сторону. Пунктирная черная граница добавлена к изображению. Мы также добавили поля для того, чтобы отодвинуть текст от изображения:
0px поле сверху и справа, 15px поле снизу, и 20px поле слева от изображения.
</p>
<p>
<img src="/images/xhtml-css.png" width="130" height="102" />
Это некоторый текст. Это некоторый текст. Это некоторый текст.
Это некоторый текст. Это некоторый текст. Это некоторый текст.
Это некоторый текст. Это некоторый текст. Это некоторый текст.
Это некоторый текст. Это некоторый текст. Это некоторый текст.
Это некоторый текст. Это некоторый текст. Это некоторый текст.
Это некоторый текст. Это некоторый текст. Это некоторый текст.
Это некоторый текст. Это некоторый текст. Это некоторый текст.
Это некоторый текст. Это некоторый текст. Это некоторый текст.
Это некоторый текст. Это некоторый текст. Это некоторый текст.
Это некоторый текст. Это некоторый текст. Это некоторый текст.
</p>
</body>
</html>
Пример 5
Пусть изображение с подписью свободно перемещается в правую сторону.<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
div
{
float:right;
width:120px;
margin:0 0 15px 20px;
padding:15px;
border:1px solid black;
text-align:center;
}
</style>
</head>
<body>
<div>
<img src="/images/xhtml-css.png" width="130" height="102" /><br />
CSS это весело!
</div>
<p>
Это некоторый текст. Это некоторый текст. Это некоторый текст.
Это некоторый текст. Это некоторый текст. Это некоторый текст.
Это некоторый текст. Это некоторый текст. Это некоторый текст.
Это некоторый текст. Это некоторый текст. Это некоторый текст.
Это некоторый текст. Это некоторый текст. Это некоторый текст.
Это некоторый текст. Это некоторый текст. Это некоторый текст.
Это некоторый текст. Это некоторый текст. Это некоторый текст.
Это некоторый текст. Это некоторый текст. Это некоторый текст.
Это некоторый текст. Это некоторый текст. Это некоторый текст.
Это некоторый текст. Это некоторый текст. Это некоторый текст.
Это некоторый текст. Это некоторый текст. Это некоторый текст.
</p>
<p>
В параграфе выше, элемент div составляет 120 пикселей в ширину и содержит изображение.
Элемент div будет плавать в правую сторону. Поля добавленны в div для того, чтобы отодвинуть текст от div.
Границы и заполнение добавлены к div с изображением и подписью.
</p>
</body>
</html>
Пример 6
Позволяет первой букве параграфа плавать влево и стилизует букву.<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
span
{
float:left;
width:0.7em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
</style>
</head>
<body>
<p>
<span>Э</span>то некоторый текст.
Это некоторый текст. Это некоторый текст.
Это некоторый текст. Это некоторый текст. Это некоторый текст.
Это некоторый текст. Это некоторый текст. Это некоторый текст.
Это некоторый текст. Это некоторый текст. Это некоторый текст.
Это некоторый текст. Это некоторый текст. Это некоторый текст.
Это некоторый текст. Это некоторый текст. Это некоторый текст.
Это некоторый текст. Это некоторый текст. Это некоторый текст.
</p>
<p>
В параграфе выше, первая буква текста встроена в элемент span.
Элемент span имеет ширину, которая равна 0.7 размера текущего шрифта.
Размер шрифта элемента span составляет 400% (довольно большой), а высота линии составляет 80%.
Шрифт буквы в span будет в "Algerian".
</p>
</body>
</html>
Пример 7
Использование свободного перемещения со списком гиперссылок для создания горизонтальных меню.<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover { background-color:#ff3300; }
li { display:inline; }
</style>
</head>
<body>
<ul>
<li><a href="#">Линк 1</a></li>
<li><a href="#">Линк 2</a></li>
<li><a href="#">Линк 3</a></li>
<li><a href="#">Линк 4</a></li>
</ul>
<p>
В приведенном выше примере, мы позволяем элементу ul и элементу a плавать влево.
Элементы li будут отображаться в виде встроенных элементов (нет разрыва строки перед или после элемента). Это заставляет список находиться на одной линии.
Элемент ul имеет ширину 100% и каждая гиперссылка в списке имеет ширину 6em (6 раз размера текущего шрифта). Мы добавили некоторые цвета и границы, чтобы сделать его более привлекательным.
</p>
</body>
</html>
Пример 8
Использование свободного перемещения для создания домашней страницы с колонтитулом, содержимым слева и основным содержанием.<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
div.container { width:100%; margin:0px; border:1px solid gray; line-height:150%; }
div.header,div.footer { padding:0.5em; color:white; background-color:gray; clear:left; }
h1.header { padding:0; margin:0; }
div.left { float:left; width:160px; margin:0; padding:1em; }
div.content { margin-left:190px; border-left:1px solid gray; padding:1em; }
</style>
</head>
<body>
<div class="container">
<div class="header"><h1 class="header">Xhtml.co.il</h1></div>
<div class="left"><p>"Никогда не увеличивай сверх того, что необходимо, количество слов, чтобы разъяснить все." Вильгельм Оккама (1285-1349)</p></div>
<div class="content">
<h2>Бесплатное руководство по веб строительству</h2>
<p>В Xhtml.co.il вы найдете все что вам нужно по веб-руководству,
от базового HTML и XHTML до продвинутого jQuery.</p></div>
<div class="footer">Copyright 2009-2010.</div>
</div>
</body>
</html>
Все свойства свободного перемещения CSS
Номер в колонке "CSS" указывает, в какой версии CSS свойство определено (CSS1 или CSS2).
| Свойство | Описание | Значения | CSS |
|---|---|---|---|
| clear | Определяет в каких сторонах элемента другие плавающие элементы не допускается | left right both none inherit |
1 |
| float | Определяет, должна ли коробка плавать | left right none inherit |
1 |
Была ли эта информация полезной?
