Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Информационный Бестселлер на DVD или CD

Статьи для сайтов!!!
Главная CSS по шагам Свойства CSS Float Font

Свойство float

Описание

Свойство float устанавливает сторону, по которой выравнивается  элемент. При этом остальные элементы обтекают его с другой стороны.

Это свойство применимо ко всем элементам, кроме позиционированных.

Элементы, к которым применяется данное свойство, получили название «Плавающие».

Значение

- left - элемент смещается влево, а остальные элементы обтекают его справа,

- right - элемент смещается вправо, а остальные элементы обтекают его слева,

- none - расположение элементов не изменяется,

- inherit - принимает значение свойства родительского элемента.

Значение по умолчанию

- none


Пример

Пример 1 - Свойство float для элементов не установлено

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title> Свойство float </title>
</head>
<body>

<p style="border:#0000FF solid 2px; width:200px; height:50px;"> </p>
<p style="border:#0000FF solid 2px; width:50px; height:100px; background-color:#66FFFF;"> </p>
<p style="border:#FF00FF solid 2px; width:400px; padding:5px;"> Элементы расположены последовательно - друг под другом. </p>

</body>
</html>

При просмотре в браузере

Элементы расположены последовательно - друг под другом.


Пример 2 - Для элементов установлено свойство float

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title> Свойство float </title>
</head>
<body>

<p style="border:#0000FF solid 2px; width:200px; height:50px; float:left;"> </p>
<p style="border:#0000FF solid 2px; width:50px; height:100px; background-color:#66FFFF; margin:10px; float:left;"> </p>
<p style="border:#FF00FF solid 2px; width:400px; padding:5px; margin:5px;"> Два блока смещены к левой стороне страницы, а текст третьего блока обтекает их справа. </p>

</body>
</html>

При просмотре в браузере

Два блока смещены к левой стороне страницы, а текст третьего блока обтекает их справа.


Пример 3 - Для элементов установлено свойство float

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title> Свойство float </title>
</head>
<body>

<p style="border:#0000FF solid 2px; width:200px; height:50px; float:left;"> </p>
<p style="border:#0000FF solid 2px; width:50px; height:100px; background-color:#66FFFF; margin:10px; float:right;"> </p>
<p style="border:#FF00FF solid 2px; padding:5px; margin:5px;"> Один блок смещен к левой стороне страницы, другой - к правой, а текст третьего блока обтекает их справа и слева соответственно </p>

</body>
</html>

При просмотре в браузере

Один блок смещен к левой стороне страницы, другой - к правой, а текст третьего блока обтекает их справа и слева соответственно


Пример 4 - Для элементов установлено свойство float

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title> Свойство float </title>
</head>
<body>

<p style="border:#0000FF solid 2px; width:200px; height:50px; float:left;"> </p>
<p style="border:#0000FF solid 2px; width:50px; height:100px; background-color:#66FFFF; margin:10px; float:left;"> </p>
<p style="border:#FF00FF solid 2px; padding:5px; width:290px;"> Два блока смещены к левой стороне страницы; ширина третьего не позволяет тексту обтекает их справа, поэтому текст обтекает блоки снизу. </p>

</body>
</html>

При просмотре в браузере

Два блока смещены к левой стороне страницы; ширина третьего не позволяет тексту обтекает их справа, поэтому текст обтекает блоки снизу.


Пример 5 - Для элементов установлено свойство float

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title> Свойство float </title>
</head>
<body>

<p style="border:#0000FF solid 2px; width:200px; height:50px; float:left;"> </p>
<p style="border:#0000FF solid 2px; width:50px; height:100px; background-color:#66FFFF; margin:10px; float:left;"> </p>
<p style="border:#FF00FF solid 2px; width:450px;"> <img src="img/peng_128.gif"> <p>
<p style="border:#FF00FF solid 2px; padding:5px; width:700px;"> Два блока смещены к левой стороне страницы, а содержимое третьего блока (пингвин) обтекает их справа. Четвертый блок располагается уже под ними. </p>

</body>
</html>

При просмотре в браузере

Два блока смещены к левой стороне страницы, а содержимое третьего блока (пингвин) обтекает их справа. Четвертый блок располагается уже под ними.

Вот таким образом можно позиционировать плавающие элементы.


Свойство Empty-cells Свойство Float Свойство Font
Свойства CSS
Дизайн сайтов
ПОИСК ПО САЙТУ:

Моё имя Антон. Связаться со мною Вы можете по e-mail: averagev@mail.ru