What is the usage of clear in css-Front-end Q&A-php.cn

What is the usage of clear in css

WBOY

Release： 2022-04-15 15:24:19

Original

6116 people have browsed it

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:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style>
img
{
float:left;
}
p.clear
{
clear:both;
}
</style>
</head>
<body>
<img  src="logocss.gif"    style="max-width:90%"  style="max-width:90%" / alt="What is the usage of clear in css" >
<p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>
<p class="clear">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.</p>
</body>
</html>

Copy after login

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!