Для завершения обтекания нужно использовать свойство clear.
float - задает по какой стороне контейнера будет выравниватся элемент, а остальные элементы будут обтекать его с другой стороны.
Синтаксис:
p {float:left | right | none;}Значение по умолчанию
Обьектная модель:
[window.]document.getElementById("elementID").style.styleFloatleft - прижимает элемент к левой стороне контейнера в котором обьект распологается, остальные элементы будут его обтекать с правой стороны.
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
