HTML | DOM Style clear Property

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:

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=
"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:

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

E

EnaMotwani

Improve

Article Tags :

Similar Reads

HTML | DOM PageTransitionEvent

The PageTrasitionEvent occurs during the time a document is being loaded or unloaded. Syntax: PageTransitionEvent.persisted Property Values: persisted: Returns boolean value whether the webpage was cached or not. Return Value: This property returns True if the document is loaded from a cache or not

HTML DOM Style display Property

The HTML DOM Style display property is used to set or return the display type of an element. It is similar to the visibility property, which displays or hides the element. With a slight difference in display: none, hiding the entire element, while visibility: hidden meaning only the contents of the

HTML | DOM Input Submit Object

The Input Submit object in HTML DOM represents the HTML <input> element with type = "submit" attribute. Syntax: It creates an Input Submit Object.document.createElement("INPUT")It is used to access an Input Submit Object.document.getElementById("id") Property Values: autofocus: It sets or retu

HTML | DOM Input URL Object

The Input URL object in HTML DOM represents an <input> element with type = "url" attribute. The element with type url can be accessed by using getElementById() method. Syntax: document.getElementById("id"); where id is assigned to the <input> tag. Property Values: list: It returns the re

HTML DOM Window frames Properties

The HTML DOM Window frames property in HTML DOM is used to return the frame element in the form of an array object. This property represents all <iframe> elements in the current window. DOM Windowframe is a read-only property. Syntax:window.framesProperties:length property: It returns the numb

HTML | DOM Window opener Properties

The Window opener property in HTML DOM is used to return the reference of newly created windows. This property is used to return the details of the source (parent) window. A window is opened using the window.open() method and closed using the window.opener.close() method. Syntax:window.openerReturn

HTML | DOM Style transitionTimingFunction property

The DOM Style transitionTimingFunction property allows a transition effect to change speed over its duration. Transition effect provides a way to control animation speed when changing properties. Syntax: To set the property:object.style.transitionTimingFunction = "ease|linear|ease-in| ease-out|ease-

HTML DOM Style textAlign Property

The HTML DOM style textAlign property is similar to the text-align property in the CSS. It sets the alignment for the inner content of a block element using HTML DOM. SyntaxWe can use textAlign in two different ways, one to set the alignment, and the other to get the current alignment.Â Get the valu

HTML | DOM Style visibility Property

The Style visibility property in HTML DOM used to set the visibility for an element. It is used to hide or show the element. It returns the visibility property that is given to an element. Syntax: It returns the visibility property.object.style.visibilityIt is used to set the visibility property. ob

HTML DOM Style transitionProperty Property

The Style transitionProperty property in HTML DOM used to set the name of the CSS property for the transition effect. It can occur when a user hover over an element. It returns the transitionProperty property of an element. Syntax: It returns the transitionProperty property. object.style.transitionP