Атрибут clear

23.09.2010

Влад Мержевич

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
3.0+	1.0+	2.0+	1.0+	1.0+	1.0+	1.0+

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

Атрибут clear сообщает браузеру, как обрабатывать следующую строку, если текст обтекает плавающий элемент. Плавающим элементом называется изображение, у которого установлен атрибут align или элемент, к которому применяется стилевое свойство float.

Результат использования clear зависит от края, по которому выравнивается элемент и значения clear. Так, если изображение выравнивается по левому краю, а значение атрибута clear тега <br> установлено как all или left, то текст после тега <br> будет отображаться ниже рисунка. Любые другие значения clear заставят текст располагаться справа от изображения и обтекать его.

Синтаксис

<br clear="all | left | right | none">

Значения

all: Отменяет обтекание элемента одновременно с правого и левого края.
left: Отменяет обтекание с левой стороны элемента, расположенного после тега <br>.
right: Отменяет обтекание с правой стороны элемента.
none: Отменяет действие атрибута.

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

Нет.

Аналог CSS

clear

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!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=utf-8">
  <title>Тег BR, атрибут clear</title>
 </head>
 <body> 
  <div style="float: left; background: #fd0; border: solid 1px black; padding: 10px; width: 40%">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
  euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  </div>
  <br clear="left">
  <p>Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel 
  illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio 
  dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te 
  feugat nulla facilisi.</p>
 </body>
</html>

Результат примера показан на рис. 1.

Отмена обтекания блока текстом

Рис. 1. Отмена обтекания блока текстом