clear

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

The clear CSS property sets whether an element must be moved below (cleared) floating elements that precede it. The clear property applies to floating and non-floating elements.

Try it

When applied to non-floating blocks, it moves the border edge of the element down until it is below the margin edge of all relevant floats. The non-floated block’s top margin collapses.

Vertical margins between two floated elements on the other hand will not collapse. When applied to floating elements, the margin edge of the bottom element is moved below the margin edge of all relevant floats. This affects the position of later floats, since later floats cannot be positioned higher than earlier ones.

The floats that are relevant to be cleared are the earlier floats within the same block formatting context.

Note: If an element contains only floated elements, its height collapses to nothing. If you want it to always be able to resize, so that it contains floating elements inside it, set the value of the element’s display property to flow-root .

#container  display: flow-root; > 

Syntax

/* 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; 

Values

Is a keyword indicating that the element is not moved down to clear past floating elements.

Is a keyword indicating that the element is moved down to clear past left floats.

Is a keyword indicating that the element is moved down to clear past right floats.

Is a keyword indicating that the element is moved down to clear past both left and right floats.

Is a keyword indicating that the element is moved down to clear floats on start side of its containing block, that is the left floats on ltr scripts and the right floats on rtl scripts.

Is a keyword indicating that the element is moved down to clear floats on end side of its containing block, that is the right floats on ltr scripts and the left floats on rtl scripts.

Formal definition

Formal syntax

clear =
inline-start |
inline-end |
block-start |
block-end |
left |
right |
top |
bottom |
none

Examples

clear: left

HTML

div class="wrapper"> p class="black"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. p> p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.p> p class="left">This paragraph clears left.p> div> 

CSS

.wrapper  border: 1px solid black; padding: 10px; > .left  border: 1px solid black; clear: left; > .black  float: left; margin: 0; background-color: black; color: #fff; width: 20%; > .red  float: left; margin: 0; background-color: pink; width: 20%; > p  width: 50%; > 

clear: right

HTML

div class="wrapper"> p class="black"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. p> p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.p> p class="right">This paragraph clears right.p> div> 

CSS

.wrapper  border: 1px solid black; padding: 10px; > .right  border: 1px solid black; clear: right; > .black  float: right; margin: 0; background-color: black; color: #fff; width: 20%; > .red  float: right; margin: 0; background-color: pink; width: 20%; > p  width: 50%; > 

clear: both

HTML

div class="wrapper"> p class="black"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui. p> p class="red"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. p> p class="both">This paragraph clears both.p> div> 

CSS

.wrapper  border: 1px solid black; padding: 10px; > .both  border: 1px solid black; clear: both; > .black  float: left; margin: 0; background-color: black; color: #fff; width: 20%; > .red  float: right; margin: 0; background-color: pink; width: 20%; > p  width: 45%; > 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 18, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

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 .

Источник