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. |
| 值 | 描述 |
|---|---|
| 沒有 | 默認值。 它允許在兩側浮動元素 |
| 剩下 | 這不允許左側有浮動元素。 |
| 對 | 這不允許在右側浮動元素。 |
| 都 | 這不允許任一側都有浮動元素。 |
| 初始 | 這會將屬性設置為其默認值。 |
| 繼承 | 這有助于從其父元素繼承屬性。 |
翻譯自: https://www.includehelp.com/code-snippets/clear-property-in-css.aspx
css clear屬性
)
)
