HTML | DOM Style clear Property
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 = 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
filter_none
Output:
- Before Click:
- After Click:
- 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 = 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
filter_none
Output:
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 = 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
filter_none
Output: