float
Краткое описание свойства float
Позволяет задать обтекание элемента.
Ограничения float
Для завершения обтекания нужно использовать свойство clear. float - задает по какой стороне контейнера будет выравниватся элемент, а остальные элементы будут обтекать его с другой стороны.
Синтаксис:
p {float:left | right | none;}
Описание аргументов:
Значение по умолчанию
none Обьектная модель:
[window.]document.getElementById("elementID").style.styleFloat left - прижимает элемент к левой стороне контейнера в котором обьект распологается, остальные элементы будут его обтекать с правой стороны.
right - прижимает элемент к правой стороне контейнера в котором обьект распологается, остальные элементы будут его обтекать с левой стороны.
none - обтекание не задается.
Пример использования атрибута left: Листинг style.css:
.clear{ clear:both;} /*Указывает что обтекание завершается после элемента которому будет присвоем класс clear*/
.float_box
{
width:50px; /*Задаем ширину обтекаемого элемента*/
height:50px; /*Задаем высоту обтекаемого элемента*/
background:#333333; /*Задаем заливку обтекаемого элемента для наглядности*/
float:left; /*указываем что элемент будет обтекатся справа*/
margin:0 20px 0 0; /*Задаем отступ от элемента до текста*/
}
Листинг index.html: <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=
"http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv=
"Content-Type" content="text/html; charset=windows-1251" />
<link type=
"text/css" rel=
"stylesheet" href=
"style.css" />
<title>
Параметр float</title>
</head>
<body>
<div class="float_box"></div>
Error sit voluptatem assusantium doloremque laudantium, totam rem aperiam eaque ipsa quae ab illo inventore <div class="clear"></div>
Error sit voluptatem assusantium doloremque laudantium, totam rem aperiam eaque ipsa quae ab illo inventore </body>
</html>
Результат: Error sit voluptatem assusantium doloremque laudantium, totam rem aperiam eaque ipsa quae ab illo inventore |
Error sit voluptatem assusantium doloremque laudantium, totam rem aperiam eaque ipsa quae ab illo inventore
В данном примере наглядно показано как текст обтекает черный блок справа, а после обьявления класса
clear в пустом контейнере
<div class="clear"></div> обтекание завершается.
Пример использования атрибута right: Листинг style.css:
.clear{ clear:both;} /*Указывает что обтекание завершается после элемента которому будет присвоем класс clear*/
.float_box
{
width:50px; /*Задаем ширину обтекаемого элемента*/
height:50px; /*Задаем высоту обтекаемого элемента*/
background:#333333; /*Задаем заливку обтекаемого элемента для наглядности*/
float:right; /*указываем что элемент будет обтекатся слева*/
margin:0 20px 0 0; /*Задаем отступ от элемента до текста*/
}
Листинг index.html: <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=
"http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv=
"Content-Type" content="text/html; charset=windows-1251" />
<link type=
"text/css" rel=
"stylesheet" href=
"style.css" />
<title>
Параметр float</title>
</head>
<body>
<div class="float_box"></div>
Error sit voluptatem assusantium doloremque laudantium, totam rem aperiam eaque ipsa quae ab illo inventore <div class="clear"></div>
Error sit voluptatem assusantium doloremque laudantium, totam rem aperiam eaque ipsa quae ab illo inventore </body>
</html>
Результат: Error sit voluptatem assusantium doloremque laudantium, totam rem aperiam eaque ipsa quae ab illo inventore |
Error sit voluptatem assusantium doloremque laudantium, totam rem aperiam eaque ipsa quae ab illo inventore
Добавить комментарий
Комментарии
RSS лента комментариев этой записи.