clear

Home

clear

( 0 - user rating )

Краткое описание свойства clear

Завершает обтекание элемента.

Ограничения clear

Нужно обязательно использовать после использования обтекания, заданного параметром float.

clear - позволяет указать с какой стороны запрещено обтекание. Используется в тех случаях когда нужно завершить обтекание элемента заданое свойством float
У параметра clear существует 2 значения:
both - запрещает обтекание со всех сторон.
left - запрещает обтекание с левой стороны.
right - запрещает обтекание с правой стороны.
none - отменяет действие свойства clear.

Синтаксис:

p {clear:both | left | none | right;}

Описание аргументов:

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

none

Обьектная модель:

[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>

Результат:

Error sit voluptatem assusantium doloremque laudantium, totam rem aperiam eaque ipsa quae ab illo inventore

свойство clear нужно обязательно применять после использования обтекания элемента - это сбережет ваши старания в верстке и ваши нервы от глюков различных браузеров.