Javascript Reference - HTML DOM Style clear Property
The clear property sets or gets
the position of the element relative to floating objects.
Browser Support
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
clear |
Yes | Yes | Yes | Yes | Yes |
Syntax
Return the clear property:
object.style.clear
Set the clear property:
object.style.clear='none|left|right|both|initial|inherit'
Property Values
| 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 |
Technical Details
| Default Value: | none |
|---|---|
| Return Value: | A string representing the position of an element relative to floating objects |
| CSS Version | CSS1 |
Example
The following code shows how to removefloating objects on the left side of the text in a <p> element:
<!DOCTYPE html>
<html>
<head>
<style>
img {<!-- w w w . ja v a2 s . c o m-->
float: left;
}
</style>
</head>
<body>
<img src="http://java2s.com/style/demo/border.png" width="100" height="132">
<p id="myP">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 some text. This is some text. This is some text.</p>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {
document.getElementById("myP").style.clear = "left";
}
</script>
</body>
</html>
The code above is rendered as follows:
Example 2
The following code shows how to get the clear property.
<!DOCTYPE html>
<html>
<body>
<!-- ww w . j a v a2 s . c om-->
<img style="float:left;" src="http://java2s.com/style/demo/border.png" width="100" height="132">
<p id="myP" style="clear:left;">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 some text. This is some text. This is some text.</p>
<button type="button" onclick="myFunction()">Return the value of the clear property</button>
<script>
function myFunction() {
console.log(document.getElementById("myP").style.clear);
}
</script>
</body>
</html>
The code above is rendered as follows: