clear

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 .

Источник

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 all css properties

The all shorthand CSS property resets all of an element’s properties except unicode-bidi , direction , and CSS Custom Properties. It can set properties to their initial or inherited values, or to the values specified in another cascade layer or stylesheet origin.

Try it

Constituent properties

This property is a shorthand for all CSS properties except for unicode-bidi , direction , and custom properties.

Syntax

/* Global values */ all: initial; all: inherit; all: unset; all: revert; all: revert-layer; 

The all property is specified as one of the CSS global keyword values. Note that none of these values affect the unicode-bidi and direction properties.

Values

Specifies that all the element’s properties should be changed to their initial values.

Specifies that all the element’s properties should be changed to their inherited values.

Specifies that all the element’s properties should be changed to their inherited values if they inherit by default, or to their initial values if not.

Specifies behavior that depends on the stylesheet origin to which the declaration belongs:

• If the rule belongs to the author origin, the revert value rolls back the cascade to the user level, so that the specified values are calculated as if no author-level rules were specified for the element. For purposes of revert , the author origin includes the Override and Animation origins.
• If the rule belongs to the user origin, the revert value rolls back the cascade to the user-agent level, so that the specified values are calculated as if no author-level or user-level rules were specified for the element.
• If the rule belongs to the user-agent origin, the revert value acts like unset .

Specifies that all the element’s properties should roll back the cascade to a previous cascade layer, if one exists. If no other cascade layer exists, the element’s properties will roll back to the matching rule, if one exists, in the current layer or to a previous style origin.

Formal definition

Initial value	There is no practical initial value for it.
Applies to	all elements
Inherited	no
Computed value	as the specified value applies to each property this is a shorthand for.
Animation type	as each of the properties of the shorthand (all properties but unicode-bidi and direction )

Formal syntax

all =
initial |
inherit |
unset |
revert |
revert-layer

Источник

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.

Источник

CSS: clear property

This CSS tutorial explains how to use the CSS property called clear with syntax and examples.

Description

The CSS clear property defines whether a block-level element should be moved down on the HTML page to clear a floated element.

Syntax

The syntax for the clear CSS property is:

Parameters or Arguments

The floated element location to clear. It can be one of the following:

Value	Description
left	Element is moved down to clear left floated elements div
right	Element is moved down to clear right floated elements div
both	Element is moved down to clear both right floated elements and left floated elements div
none	Element will not be moved down to clear any floated elements div
inherit	Element will inherit the clear from its parent element div

Note

• Use the CSS clear property to specify whether a block-level element should be next to a floating element or whether it should move down on the HTML page to clear the floated element.
• See the CSS float property to learn how to float elements.

Browser Compatibility

The CSS clear property has basic support with the following browsers:

• Chrome
• Android
• Firefox (Gecko)
• Firefox Mobile (Gecko)
• Internet Explorer (IE)
• IE Phone
• Opera
• Opera Mobile
• Safari (WebKit)
• Safari Mobile

Example

We will discuss the clear property below, exploring examples of how to use this property in CSS.

Using Left

Let’s look at a CSS clear example where we want to clear a left floated element.

In this CSS clear example, we have set the tag to clear any left floated elements that preceded it in the HTML document.

Using Right

Let’s look at a CSS clear example where we want to clear a right floated element.

In this CSS clear example, we have set the tag to clear any right floated elements that preceded it in the HTML document.

Using Both

Let’s look at a CSS clear example where we want to clear all left floated elements and right floated elements.

In this CSS clear example, we have set the tag to clear both left floated elements and right floated elements that preceded it in the HTML document.

Источник