HTML | DOM Style clear Property

Last Updated : 31 Jul, 2019

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:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML | DOM Style clear Property
    </title>
    <style>
        img {
            float: left;
        }
    </style>
</head>
  
<body>
  
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/gfg_200X200.png" 
         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:

Example-2:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML | DOM Style clear Property
    </title>
    <style>
        img {
            float: right;
        }
    </style>
</head>
  
<body>
  
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/gfg_200X200.png" 
         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 right side of text</button>
  
    <script>
        function myFunction() {
            
            document.getElementById(
              "P").style.clear = "right";
        }
    </script>
  
</body>
  
</html>

Output:

Before Click:

After Click:

Example-3:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML | DOM Style clear Property
    </title>
    <style>
        img {
            float: right;
        }
          
        #i {
            float: left;
        }
    </style>
</head>
  
<body>
  
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/gfg_200X200.png" 
         width="150" height="150">
    <img id="i" src=
"https://media.geeksforgeeks.org/wp-content/uploads/gfg_200X200.png" 
         width="150" height="150">
  
    <p id="P" style="color:green">
      GEEKSFORGEEKS PARAGRAPH HERE
      GEEKSFORGEEKS PARAGRAPH HERE 
    </p>
  
    <button type="button" onclick="myFunction()">
      Clear left and right side of text
  </button>
  
    <script>
        function myFunction() {
            
            document.getElementById(
              "P").style.clear = "both";
        }
    </script>
  
</body>
  
</html>

Output:

Before Click:
After Click:
Supported Browsers: The supported browser by HTML | DOM Style clear Property
are listed below:
- Google Chrome
- Edge
- Mozilla Firefox
- Opera
- Safari
Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML course.

My Personal Notes

Related Articles

HTML | DOM Style clear Property