clear
Description
clear defines the sides of an element on which no floating elements may appear.
| Item | Value |
|---|---|
| Initial value | none |
| Inherited | No. |
| Version | CSS1 |
| JavaScript syntax | object.style.clear="left" |
| Applies to | Block-level elements. |
Syntax and Property Values
clear: both | left | none | right | inherit
The property values are listed in the following table.
| Value | Description |
|---|---|
| left | No floating elements on the left side |
| right | No floating elements on the right side |
| both | No floating elements on the left or the right side |
| none | Default. Allows floating elements on both sides |
| inherit | Inherit the clear property from the parent element |
Example
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<style type='text/css'>
p {<!-- ww w. ja v a 2 s. c o m-->
border: 1px solid black;
background: rgb(218, 218, 218);
line-height: 1em;
padding: 10px;
}
p#floated {
float: left;
margin: 10px;
}
p#cleared {
clear: left;
}
</style>
</head>
<body>
<p id='floated'>
This is the text of the first paragraph.
</p>
<p id='cleared'>
This is the text of the second paragraph.
</p>
</body>
</html>
The code above generates the following result.
