CSS свойство clear
Свойство clear устанавливает, должен ли элемент находиться рядом с плавающими элементами или же ниже плавающих элементов (clear).
Можно применить свойство clear к плавающим и неплавающим элементам. Имеет четыре значения — none, left, right и both. «None» — значение по умолчанию. Значение разрешает плавающие элементы с обеих сторон. Значение «left» запрещает плавающие элементы с левой стороны. Значение «right» запрещает плавающие элементы с правой стороны. Значение «both» запрещает плавающие элементы с левой и правой стороны.
| Значение по умолчанию | none |
| Применяется | К элементам блочного уровня. |
| Наследуется | Нет |
| Анимируемое | Нет |
| Версия | CSS1 |
| DOM синтаксис | object.style.clear = «both»; |
Синтаксис
clear: none | left | right | both | initial | inherit;Пример
html> html> head> title>Заголовок документа title> style> img < float: left; background: #ccc > .clear < clear: right; > style> head> body> img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png"> p class="clear">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. p> body> html>Пример
html> html> head> title>Заголовок документа title> style> img < float: right; background: #ccc > .clear < clear: left; > style> head> body> img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png"> p class="clear">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. p> body> html>Пример
html> html> head> title>Заголовок документа title> style> img < float: right; background: #CCC; > p.clear < clear: both; > style> head> body> img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" width="220" height="80"> p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. p> p class="clear">Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. p> body> html>Значения
| Значение | Описание |
|---|---|
| none | Разрешает плавающие элементы с обеих сторон. Значение по умолчанию. |
| left | Запрещает плавающие элементы с левой стороны. |
| right | Запрещает плавающие элементы с правой стороны. |
| both | Запрещает плавающие элементы с правой и левой стороны. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Значение элемента наследуется от родительского элемента. |
Поддержка браузера
clear¶
Свойство clear устанавливает, с какой стороны элемента запрещено его обтекание другими элементами.
Если задано обтекание элемента с помощью свойства float , то clear отменяет его действие для указанных сторон.
Демо¶
Синтаксис¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14
/* Keyword values */ clear: none; clear: left; clear: right; clear: both; clear: inline-start; clear: inline-end; /* Global values */ clear: inherit; clear: initial; clear: revert; clear: revert-layer; clear: unset; Значения¶
none Отменяет действие свойства clear , при этом обтекание элемента происходит, как задано с помощью свойства float или других настроек. both Отменяет обтекание элемента одновременно с правого и левого края. Это значение рекомендуется устанавливать, когда требуется снять обтекание элемента, но неизвестно точно с какой стороны. left Отменяет обтекание с левого края элемента. При этом все другие элементы на этой стороне будут опущены вниз, и располагаться под текущим элементом. right Отменяет обтекание с правой стороны элемента.
Применяется к блочным элементам
Спецификации¶
Описание и примеры¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
html> head> meta charset="utf-8" /> title>cleartitle> style> .pull-left float: left; /* Обтекание блока по правому краю */ padding-right: 10px; > .clearfix clear: both; > style> head> body> div class="pull-left"> img src="image/figure.jpg" alt="" /> div> div class="clearfix">div> p> Бихевиоризм, как бы это ни казалось парадоксальным, просветляет сублимированный стимул, так, например, Ричард Бендлер для построения эффективных состояний использовал изменение субмодальностей. p> body> html> 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
Устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если задано обтекание элемента с помощью свойства 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 .
