The clear property for CSS indicates which sides of an element's box(es) may not be adjacent to an earlier floating box.
object.style.clear = "value"; <'clear'> = none | left | right | both | inherit none No constraint on the box's position with respect to floats.
left Requires that the top border edge of the box be below the bottom outer edge of any left-floating boxes that resulted from elements earlier in the source document.
right Requires that the top border edge of the box be below the bottom outer edge of any right-floating boxes that resulted from elements earlier in the source document.
both Requires that the top border edge of the box be below the bottom outer edge of any right-floating and left-floating boxes that resulted from elements earlier in the source document.
inherit Specifies the same value as the parent.
<!doctype html>
<html>
<head>
<style>
.clear
{
background-color: yellow;
clear: left;
}
.left
{
background-color: lightgray;
float: left;
height: 50px;
width: 100px;
}
.right
{
background-color: lightgray;
float: right;
height: 100px;
width: 50px;
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="right">right</div>
<div class="clear">left</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
.clear
{
background-color: yellow;
clear: none;
}
.left
{
background-color: lightgray;
float: left;
height: 50px;
width: 100px;
}
.right
{
background-color: lightgray;
float: right;
height: 100px;
width: 50px;
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="right">right</div>
<div class="clear">none</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
.clear
{
background-color: yellow;
clear: right;
}
.left
{
background-color: lightgray;
float: left;
height: 50px;
width: 100px;
}
.right
{
background-color: lightgray;
float: right;
height: 100px;
width: 50px;
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="right">right</div>
<div class="clear">right</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
.clear
{
background-color: yellow;
}
.left
{
background-color: lightgray;
float: left;
height: 50px;
width: 100px;
}
.right
{
background-color: lightgray;
float: right;
height: 100px;
width: 50px;
}
</style>
</head>
<body>
<button>initial</button>
<button>both</button>
<button>left</button>
<button>none</button>
<button>right</button><br>
<div class="left">left</div>
<div class="right">right</div>
<div class="clear">clear</div>
<script>
function myfunction(myparameter)
{
document.querySelector(".clear").style.clear = myparameter.target.innerHTML;
}
for(const mybutton of document.querySelectorAll("button"))
{
mybutton.addEventListener("mouseover", myfunction);
}
</script>
</body>
</html>