clear

clear

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

Синтаксис

clear: none | left | right | both | inherit

Значения

none Отменяет действие свойства clear , при этом обтекание элемента происходит, как задано с помощью свойства float или других настроек. both Отменяет обтекание элемента одновременно с правого и левого края. Это значение рекомендуется устанавливать, когда требуется снять обтекание элемента, но неизвестно точно с какой стороны. left Отменяет обтекание с левого края элемента. При этом все другие элементы на этой стороне будут опущены вниз, и располагаться под текущим элементом. right Отменяет обтекание с правой стороны элемента. inherit Устанавливает значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

        
 
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.
  

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

Рис. 1. Применение свойства clear

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

[window.]document.getElementById(» elementID «).style.clear

Браузеры

В браузере Internet Explorer 6 наблюдается ошибка под названием «эффект ку-ку», когда элементы c clear , соприкасающиеся с плавающими элементами (у которых задано свойство float ) могут исчезать.

В браузере Internet Explorer 7 свойство clear не действует для элементов, у которых одновременно задано float со значением, не совпадающим с clear .

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Источник

Атрибут clear

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

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

Этот атрибут устарел, взамен используйте стилевое свойство clear.

Синтаксис

Значения

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

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

Пример

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

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

Браузеры

В таблице браузеров применяются следующие обозначения.

• — элемент полностью поддерживается браузером;
• — элемент браузером не воспринимается и игнорируется;
• — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Источник

Атрибут clear

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

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

Синтаксис

Значения

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

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

Аналог CSS

Валидация

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

       
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
 
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.
  

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

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

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

Источник

Тег br

Тег
используется для переноса строки. Располагается в том месте текста, где необходим перенос.

Тег
не добавляет пустой отступ перед строкой, в отличие от тега

.

Атрибут Clear

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

— left — отменяет обтекание плавающего элемента, расположенного слева.
— all – отменяет обтекание плавающего элемента, расположенного с любой стороны.
— right — отменяет обтекание плавающего элемента, расположенного справа.
— none — отменяет действие атрибута clear

1. Меня тревожила судьба восемнадцати человек, скрывавшихся где то за горизонтом, в то время как на нас медленно надвигались черные громады туч. Но Волка Ларсена это, по видимому, не особенно беспокоило, хотя, когда мы вышли на палубу, я заметил, что у него слегка раздуваются ноздри и движения стали быстрее. Лицо его было сурово и жестко, но глаза – ясно голубые в тот день – как то особенно поблескивали. Меня поразило, что Ларсен был весел – свирепо весел, словно он радовался предстоящей борьбе, ликовал в предвкушении великой минуты, когда стихии обрушатся на него.

2. Меня тревожила судьба восемнадцати человек, скрывавшихся где то за горизонтом, в то время как на нас медленно надвигались черные громады туч.

3. Меня тревожила судьба восемнадцати человек, скрывавшихся где то за горизонтом, в то время как на нас медленно надвигались черные громады туч.
Но Волка Ларсена это, по видимому, не особенно беспокоило, хотя, когда мы вышли на палубу, я заметил, что у него слегка раздуваются ноздри и движения стали быстрее. Лицо его было сурово и жестко, но глаза – ясно голубые в тот день – как то особенно поблескивали. Меня поразило, что Ларсен был весел – свирепо весел, словно он радовался предстоящей борьбе, ликовал в предвкушении великой минуты, когда стихии обрушатся на него.

1. Меня тревожила судьба восемнадцати человек, скрывавшихся где то за горизонтом, в то время как на нас медленно надвигались черные громады туч. Но Волка Ларсена это, по видимому, не особенно беспокоило, хотя, когда мы вышли на палубу, я заметил, что у него слегка раздуваются ноздри и движения стали быстрее. Лицо его было сурово и жестко, но глаза – ясно голубые в тот день – как то особенно поблескивали.

2. Меня тревожила судьба восемнадцати человек, скрывавшихся где то за горизонтом, в то время как на нас медленно надвигались черные громады туч.
Но Волка Ларсена это, по видимому, не особенно беспокоило, хотя, когда мы вышли на палубу, я заметил, что у него слегка раздуваются ноздри и движения стали быстрее. Лицо его было сурово и жестко, но глаза – ясно голубые в тот день – как то особенно поблескивали.

3. Меня тревожила судьба восемнадцати человек, скрывавшихся где то за горизонтом, в то время как на нас медленно надвигались черные громады туч.
Но Волка Ларсена это, по видимому, не особенно беспокоило, хотя, когда мы вышли на палубу, я заметил, что у него слегка раздуваются ноздри и движения стали быстрее. Лицо его было сурово и жестко, но глаза – ясно голубые в тот день – как то особенно поблескивали.

— в первом случае текст обтекает плавающий элемент (изображение пингвина, размещенное в правой части экрана) слева;

— во втором варианте мы производим перенос строки при помощи тега
, и текст также обтекает плавающий элемент слева.

— и в третьем варианте мы добавляем к тегу
атрибут clear=»right» , таким образом отменяя обтекание плавающего элемента (пингвина), расположенного справа, а текст, расположенный после тега
, смещается ниже пингвина.

Источник