clear

clear

Свойство clear CSS устанавливает, нужно ли перемещать элемент ниже (очищать) плавающие элементы, которые ему предшествуют. Свойство clear применяется к плавающим и неплавающим элементам.

Try it

При применении к неплавающим блокам он перемещает границу элемента вниз до тех пор, пока она не окажется ниже границы всех соответствующих плавающих элементов . Верхнее поле неплавающего блока схлопывается.

С другой стороны,вертикальные поля между двумя плавающими элементами не будут сворачиваться.При применении к плавающим элементам край поля нижнего элемента перемещается ниже края поля всех соответствующих плавающих элементов.Это влияет на положение более поздних плавающих элементов,поскольку более поздние элементы не могут быть расположены выше,чем ранние.

Очищаемые числа с плавающей запятой — это более ранние числа с плавающей запятой в том же контексте форматирования блока .

Примечание. Если элемент содержит только плавающие элементы, его высота уменьшается до нуля. Если вы хотите, чтобы он всегда имел возможность изменять размер, чтобы он содержал внутри плавающие элементы, вам необходимо самостоятельно очистить его дочерние элементы. Это называется clearfix , и один из способов сделать это, чтобы добавить clear для заменяемого ::after псевдо-элемента на нем.

#container::after < content: ""; display: block; clear: both; >

Syntax

/ * Значения ключевых слов * / clear: none; clear: left; clear: right; clear: both; clear: inline-start; clear: inline-end; / * Глобальные значения * / clear: inherit; clear: initial; clear: revert; clear: revert-layer; clear: unset;

Values

Ключевое слово, указывающее, что элемент не перемещен вниз, чтобы очистить плавающие элементы.

Ключевое слово, указывающее, что элемент перемещен вниз, чтобы очистить прошедшие левые поплавки.

Ключевое слово, указывающее, что элемент перемещен вниз, чтобы очистить правое плавание.

Ключевое слово, указывающее, что элемент перемещается вниз, чтобы очистить как левый, так и правый значения

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

Ключевое слово, указывающее, что элемент перемещается вниз, чтобы очистить числа с плавающей запятой на конце его содержащего блока , то есть правые значения с плавающей точкой в ​​сценариях ltr и левые значения с плавающей точкой в ​​сценариях RTL.

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

Источник

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

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 .

Источник