Related Articles

Related Articles

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:



filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

  • Before Click:
  • After Click:
  • Example-2:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

    • Before Click:
    • After Click:
    • Example-3:

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <!DOCTYPE html>
      <html>
        
      <head>
          <title>
              HTML | DOM Style clear Property
          </title>
          <style>
              img {
                  float: right;
              }
                
              #i {
                  float: left;
              }
          </style>
      </head>
        
      <body>
        
          <img src=
               width="150" height="150">
          <img id="i" src=
               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>

      chevron_right

      
      

      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

        full-stack-img




        My Personal Notes arrow_drop_up
Recommended Articles
Page :