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