HTML DOM Style clear Property

HTMLWeb DevelopmentFront End Technology

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 −

ValueDescription
leftElements are not floated on the left side.
rightElements are not floated on the right side
bothElements are not floated on neither left nor right side.
noneElements are floated on both sides and this is the default value.
inheritTo inherit the parent property value

Let us look at an example for the clear property −

Example

 Live Demo

<!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 −

raja
Published on 23-Oct-2019 07:46:18
Advertisements