Open In App

HTML | DOM Style clear Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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:

value description
left Does not allow floating entities on the left of the element
right Does not allow floating entities on the right of the element
both Does not allow floating entities on the left or right of the element
none Allows floating entities on the left of the element as well as on the right of the element.This is default
initial Sets the value of the property to its default value.
inherit Inherits 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


Last Updated : 05 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads