The DOM Style clear property in HTML is used to set or get the position of the specific element relative to floating objects.
Syntax
object.style.clear
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:
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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
05 Jun, 2022
Like Article
Save Article