Skip to content
Related Articles

Related Articles

HTML | DOM Style clear Property

View Discussion
Improve Article
Save Article
  • Last Updated : 05 Jun, 2022

The DOM Style clear property in HTML is used to set or get the position of the specific element relative to floating objects.

Syntax

  • To get clear property:
object.style.clear
  • To set clear property:
object.style.clear = "none|left|right|both|initial|inherit"

Properties Value:

valuedescription
leftDoes not allow floating entities on the left of the element
rightDoes not allow floating entities on the right of the element
bothDoes not allow floating entities on the left or right of the element
noneAllows floating entities on the left of the element as well as on the right of the element.This is default
initialSets the value of the property to its default value.
inheritInherits the value of this property i.e sets the value same as that of the parent

Return Value: It returns a string representing the position of an element relative to floating objects. 

Example-1: 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML | DOM Style clear Property
    </title>
    <style>
        img {
            float: left;
        }
    </style>
</head>
 
<body>
 
    <img src=
         width="150" height="150">
 
    <p id="P" style="color:green">
      GEEKSFORGEEKS PARAGRAPH HERE GEEKSFORGEEKS PARAGRAPH HERE
      GEEKSFORGEEKS PARAGRAPH HERE GEEKSFORGEEKS PARAGRAPH HERE
      GEEKSFORGEEKS PARAGRAPH HERE GEEKSFORGEEKS PARAGRAPH HERE
      GEEKSFORGEEKS PARAGRAPH HERE GEEKSFORGEEKS PARAGRAPH HERE
      GEEKSFORGEEKS PARAGRAPH HERE
    </p>
 
    <button type="button" onclick="myFunction()">
      Clear left side of text</button>
 
    <script>
        function myFunction() {
           
            document.getElementById(
              "P").style.clear = "left";
        }
    </script>
 
</body>
 
</html>

Output: 

  • Before Click:

 

  • After Click:

 

  • Before Click:

 

  • After Click:

 

  • Before Click:

 

  • After Click:

 

Supported Browsers:

  • Google Chrome 1 and above
  • Edge 12 and above
  • Internet Explorer 4 and above
  • Mozilla Firefox 1 and above
  • Opera 3.5 and above
  • Safari 1 and above

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!