Home>Article>Web Front-end> What is the usage of clear in css

What is the usage of clear in css

WBOY
WBOY Original
2022-04-15 15:24:19 5887browse

In CSS, the clear attribute is used to clear the floating effect of an element. This attribute can specify the effect of floating elements on the left or right side of a paragraph; the default value of this attribute is none, which means that floating elements are allowed to appear in On both sides, you can also set that there cannot be floating elements on the left, right or left and right sides of the element. The syntax is "element {clear: attribute value;}".

What is the usage of clear in css

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

What is the usage of clear in css

The function of clear in css is to clear the floating effect of elements.

The clear attribute specifies that floating elements are not allowed on the left or right side of the paragraph.

In CSS1 and CSS2, this is achieved by automatically adding a top margin to clear elements (i.e. elements with the clear attribute set). In CSS2.1, clear space is added above the element's upper margin, but the margin itself does not change.

No matter what kind of change, the final result is the same. If it is declared to be cleared on the left or right, the top outer border of the element will be just below the bottom margin of the floating element on that side.

clear attribute value:

  • eft No floating elements are allowed on the left.

  • #right Floating elements are not allowed on the right side.

  • Both Floating elements are not allowed on the left and right sides.

  • none Default value. Allows floated elements to appear on both sides.

  • inherit specifies that the value of the clear attribute should be inherited from the parent element.

The example is as follows:

    123  
  What is the usage of clear in css 

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.

This is also some text. This is also some text. This is also some text. This is also some text. This is also some text. This is also some text.

Output result:

What is the usage of clear in css

(Learning video sharing:css video tutorial)

The above is the detailed content of What is the usage of clear in css. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn