The HTML DOM clear property is used for getting or setting the position of a floating element. It is used to specify whether an element should be moved below another floating element or not.
Following is the syntax for −
Setting the clear property −
object.style.clear='none|left|right|both|initial|inherit'
The above properties are explained as follows −
| Value | Description |
|---|---|
| left | Elements are not floated on the left side. |
| right | Elements are not floated on the right side |
| both | Elements are not floated on neither left nor right side. |
| none | Elements are floated on both sides and this is the default value. |
| inherit | To inherit the parent property value |
Let us look at an example for the clear property −
Example
<!DOCTYPE html>
<html>
<head>
<style>
img {
margin: 5px;
float: right;
clear: both;
border: 2px solid orange;
}
#DIV1{
clear:left;
}
</style>
<script>
function changeClear(){
document.getElementById("DIV1").style.clear="right";
document.getElementById("Sample").innerHTML="The div clear property is changed to right from left ";
}
</script>
</head>
<body>
<img src="https://www.tutorialspoint.com/qlikview/images/qlikview-mini-logo.jpg">
<div id="DIV1">This is sample text inside div. This is another line inside the div.Here is a div containing some random english text. This div is created to demonstrate clear property </div>
<p>Change the above div clear property by clicking the below button</p>
<button onclick="changeClear()">Change Clear</button>
<p id="Sample"></p>
</body>
</html>Output
On clicking the “Change Clear” button −
