css clear属性_CSS中的clear属性

css clear属性

CSS | 清除财产 (CSS | clear Property)

We know so much about float property and how it is used for styling our web pages. If you do not remember the float property, let's help jog your memory. The float property is used to set the elements in a particular section of the web page. For e.g, if you set the property for an element as float:right; then that particular element will float to the right side of the page. But what about the time when we do not want that element to float in that part of the page?

我们对float属性及其如何用于设置网页样式非常了解。如果您不记得float属性，让我们来帮助您记忆一下。 float属性用于设置网页特定部分中的元素。例如，如果您将元素的属性设置为float：right; 那么该特定元素将浮动到页面的右侧。但是，当我们不希望该元素在页面的该部分中浮动时该怎么办？

That is where clear property comes in.

那就是清除财产的地方。

The clear property is a very basic and easy property to apply. It is used to specify on which side of the page the floating elements should not float basically to clear that section of the page of the floating elements.

clear属性是一个非常基本且易于应用的属性。它用于指定浮动元素基本上不应浮动在页面的哪一侧，以清除浮动元素页面的该部分。

By using clear property it will be ensured that the element on which clear property is applied will not float to the specified area of the page. This property comes in handy very often when we do not want our elements to float either side of the web page.

通过使用clear属性 ，将确保应用了clear属性的元素不会浮动到页面的指定区域。当我们不希望元素在网页的任何一侧浮动时，此属性通常会派上用场。

Implication

意义

To use the clear property not many lines of code are required all you gotta do is specify the side or section of the page where you do not want your floating elements to float.

要使用clear属性，不需要很多代码行，您要做的就是指定页面中您不希望浮动元素浮动的一侧或部分。

This could be understood clearly with the help of the following example:

通过以下示例可以清楚地理解这一点：

For e.g: if you do not want your elements to float on either side of the page(left or right), you must use this property as:

例如：如果您不希望元素在页面的任一侧(左或右)浮动，则必须将此属性用作：

Syntax:

句法：

Element {
clear: both;
}

Note that to not allow floating elements to float on either side of the page, only both attribute was enough we did not use "right and wrong", which makes it quite shorthand too.

请注意，为了不让浮动元素浮动在页面的任何一侧，仅两个属性就足够了，我们没有使用“对与错” ，这也使其非常简写。

However, if you wish to restrict your floating elements from floating on a particular side of the page, for example, right then you will have to specify right as an attribute.

但是，例如，如果您希望限制浮动元素不浮动在页面的特定一侧，则必须将right指定为属性。

Example:

例：

<!DOCTYPE html>
<html>
<head>
<style>
img {
float: left;
}
p.clear {
clear: both;
}
</style>
</head>
<body>
<h1>clear property in CSS</h1>
<img src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" width="140" height="142">
<p>this is a clear property example..this is a clear property example.this is a clear property example.this is a clear property example.this is a clear property example.this is a clear property example</p>
<p class="clear">this is a clear property example..this is a clear property example.this is a clear property example.this is a clear property example.this is a clear property example.this is a clear property example</p>
</body>
</html>

Output

输出量

In the above example, remove the clear class to see the effect.

在上面的示例中，删除clear类以查看效果。

Key points:

关键点：

Let us understand clear property more,

让我们更多地了解清晰的属性 ，

The default value of the clear property is none. This means if you write none immediately after clear then no changes will be done to the floating elements.

clear属性的默认值为none 。这意味着，如果在清除后立即不写任何内容，则不会对浮动元素进行任何更改。

To use this property in JavaScript, the syntax is different and it goes like this,

要在JavaScript中使用此属性，语法会有所不同，就像这样，

object.style.clear="both"

Below is a table that would explain the values of clear property in a much better way,

下面的表格将以更好的方式说明clear属性的值，

Property values:

属性值：

Value	Description
none	A default value. It allows floating elements on either sides
left	This does not allow floating elements on the left side.
right	This does not allow floating elements on the right side.
both	This does not allow floating elements on either side.
initial	This would set the property to its default value.
inherit	This helps in inheriting property from its parent element.

值	描述
没有	默认值。它允许在两侧浮动元素
剩下	这不允许左侧有浮动元素。
对	这不允许在右侧浮动元素。
都	这不允许任一侧都有浮动元素。
初始	这会将属性设置为其默认值。
继承	这有助于从其父元素继承属性。