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