clear
CSS clear Property
The clear property is directly related to floats. The clear property is used to specify whether an element should be next to floating elements or it should be below them (clear).
We can apply the clear property to both floating and non-floating elements. This property has four values: none, left, right, and both. “None” is the default value. It allows floating elements on both sides. “Left” value does not allow any floating element on the left side. “Right” value does not allow any floating element on the right side. “Both” value does not allow any floating element on either left or right side.
| 类目 | 类目 |
|---|---|
| Initial Value | none |
| Applies to | Block-level elements. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS1 |
| DOM Syntax | object.style.clear = “both”; |
Syntax
Syntax
clear: none | left | right | both | initial | inherit;
Example of the clear property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
float: left;
background: #ccc
}
.clear {
clear: left;
}
</style>
</head>
<body>
<img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png">
<p class="clear">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</body>
</html>
Result
Example of the clear property with the “left” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
float: right;
background: #ccc
}
.clear {
clear: right;
}
</style>
</head>
<body>
<img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png">
<p class="clear">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</body>
</html>
Example of the clear property with the “both” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
float: right;
background: #CCC;
}
p.clear {
clear: both;
}
</style>
</head>
<body>
<img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" width="220" height="80">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p class="clear">
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</body>
</html>
Values
Values
| Value | Description |
|---|---|
| none | Allows floating elements on both sides. It is the default value of this property. |
| left | Means that the floating elements are not allowed on the left side. |
| right | Means that the floating elements are not allowed on the right side. |
| both | Means that the floating elements are not allowed on the both right and left sides. |
| initial | Makes the property use its default value. |
| inherit | Inherits the property from its parents element. |