clear

CSS clear Property

The

element is pushed below left floated elements (the

element do not allow floating elements on the left side):

Definition and Usage

The clear property controls the flow next to floated elements.

The clear property specifies what should happen with the element that is next to a floating element.

Tip: Also look at the float property.

Default value:	none
Inherited:	no
Animatable:	no. Read about animatable
Version:	CSS1
JavaScript syntax:	object.style.clear=»both» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

Property Values

Value	Description	Demo
none	Default. The element is not pushed below left or right floated elements	Demo ❯
left	The element is pushed below left floated elements	Demo ❯
right	The element is pushed below right floated elements	Demo ❯
both	The element is pushed below both left and right floated elements	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

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

CSS свойство clear указывает с какой стороны текущего элемента не допускаются плавающие элементы (плавающими являются элементы, у которых CSS свойство float имеет значение right или left ).

Если для элемента установлен запрет обтекания плавающих элементов с обеих сторон, то он будет смещён вниз — под плавающий элемент. Обратите внимание, что элемент будет смещён под плавающий элемент только в том случае, если плавающий элемент находится с той же стороны, с которой он запрещён у текущего элемента.

Рассмотрим на небольшом примере как работает свойство clear . На изображении, расположенном ниже, видно, что плавающий элемент с идентификатором sidebar частично перекрывает два блочных элемента.

Нам нужно сделать так, чтобы нижний блочный элемент не перекрывался плавающим элементом, для этого воспользуемся свойством clear для с идентификатором footer и установим ему значение right . Таким образом мы указали, что с правой стороны элемента не может быть никакого плавающего содержимого, в результате чего он смещается немного вниз и располагается под плавающим элементом:

Значение по умолчанию:	none
Применяется:	к элементам блочного уровня (в том числе и к самим плавающим элементам)
Анимируется:	нет
Наследуется:	нет
Версия:	CSS1
Синтаксис JavaScript:	object.style.clear=»left»

Синтаксис

clear: none|left|right|both|inherit;

Значения свойства

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

Пример

     img < float: left; >p.clear   
Это какой-то текст.
 
Это какой-то текст.
   

Результат данного примера в окне браузера:

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru

Источник

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 .

Источник