Style clearProperty
Style Object
Definition and Usage
The clear property sets or returns the position of an element relative to floating objects.
Syntax
Set the clear property:
Object.style.clear="none|left|right|both|inherit"
Return the clear property:
Object.style.clear
| Value | Description |
|---|---|
| none | Default. Allows floating objects to appear on both sides of the element. |
| left | Floating objects are not allowed on the left side of the element. |
| right | Floating objects are not allowed on the right side of the element. |
| both | Floating objects are not allowed on either side of the element. |
| inherit | The value of the clear property should be inherited from the parent element. |
Browser Support
All major browsers support the clear property.
Note:IE7 and earlier versions do not support the "inherit" value. IE8 supports "inherit" only if a !DOCTYPE is specified. IE9 supports "inherit".
Example
Example
Floating objects are not allowed on the left side of the text:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example Tutorial (example.com)</title>
<style type="text/css">
img {
float:left;
}
</style>
<script>
function displayResult(){
document.getElementById("p1").style.clear="left";
}
</script>
</head>
<body>
<img src="w3javascript.gif.html" width="100" height="132">
<p id="p1">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. This is some text.</p>
<input type="button" onclick="displayResult()" value="Float text left">
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Example Tutorial (example.com)</title>
<style type="text/css">
img {
float:left;
}
</style>
<script>
function displayResult(){
document.getElementById("p1").style.clear="left";
}
</script>
</head>
<body>
<img src="w3javascript.gif.html" width="100" height="132">
<p id="p1">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. This is some text.</p>
<input type="button" onclick="displayResult()" value="Float text left">
</body>
</html>
Try it Yourself »
Style Object Other Extensions