CSS clear property
CSS clear property
Description
Clear prevents an element from appearing next to a floated element.
Possible values
- none – Floated elements can appear on either side of an element.
-
left – Floated elements cannot appear on the left side of an element.
-
right – Floated elements cannot appear to the right of an element.
-
both – Floated elements cannot appear on either side of an element.
Applies to
All block-level elements.
DOM Syntax
object.style.clear = "top";
Example
Here is an example showing the effect of this property –
<html>
<head>
<style type = "text/css">
div.float {
border:1px solid #ff9900;
width:120px;
float: right;
}
div.clear {
border:1px solid #cccccc;
width:120px;
clear: right;
}
</style>
</head>
<body>
<div class = "float">
This div has float set.
</div>
<div class = "clear">
<p>
This div has the CSS clear property set.
</p>
<p>
Try changing the CSS clear values to see the effect it has on the position of the div boxes.
</p>
</div>
</body>
</html>
This will produce the following results−
