Clear all browser css

clear

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

Интерактивный пример

При применении к неплавающим блокам он перемещает границу края border edge (en-US) элемента до тех пор, пока не окажется ниже края margin edge (en-US) поля всех соответствующих поплавков. Вертикальный край неплавающего блока сжимается.

Вертикальные поля между двумя плавающими элементами, с другой стороны, не будут разрушаться. При применении к плавающим элементам — margin edge (en-US) нижнего элемента перемещается ниже margin edge (en-US) всех соответствующих поплавков. Это влияет на положение более поздних поплавков, поскольку более поздние поплавки не могут быть расположены выше предыдущих.

Поплавки, которые имеют отношение к очистке, — это более ранние поплавки в одном и том же контексте форматирования блоков (en-US) .

Примечание: Если элемент содержит только плавающие элементы, его высота сворачивается в ничто. Если вы хотите, чтобы он всегда мог изменять размер, чтобы он содержал в себе плавающие элементы, вам нужно самоочистить своих детей. Это называется clearfix, и один из способов сделать это — это заменит clear заменённый ::after псевдоэлемент на нем.«`css #container::after

Синтаксис

/* Значения ключевых слов */ clear: none; clear: left; clear: right; clear: both; clear: inline-start; clear: inline-end; /* Global values */ clear: inherit; clear: initial; clear: unset; 

Значения

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

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

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

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

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

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

Формальный синтаксис

clear =
inline-start | (en-US)
inline-end | (en-US)
block-start | (en-US)
block-end | (en-US)
left | (en-US)
right | (en-US)
top | (en-US)
bottom | (en-US)
none

Примеры

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">Этот абзац очищается слева.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.p> p class="red">- Так я ж намедни намекал, что Lorem ipsum dolor sit amet, consectetuer adipiscing elit.p> p class="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.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">Этот абзац очищает оба.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%; > 

Характеристики

Спецификация	Статус	Коммент
CSS Logical Properties and Values Level 1 Определение ‘float and clear’ в этой спецификации.	Редакторский черновик	Добавляет значения inline-start и inline-end .
CSS Level 2 (Revision 1) Определение ‘clear’ в этой спецификации.	Рекомендация	Никаких существенных изменений, хотя детали уточняются.
CSS Level 1 Определение ‘clear’ в этой спецификации.	Рекомендация	Начальное определение

Начальное значение	none
Применяется к	блочные элементы
Наследуется	нет
Обработка значения	как указано
Animation type	discrete

Совместимость с браузером

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

This page was last modified on 11 февр. 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

Свойство 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

Источник

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.

Источник