clear
The clear CSS property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box.
CSS
JS
object.style.clear = "value";
Values
<'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.
Initial
both
left
<!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>
none
<!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>
right
<!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>
JS
<!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>
<script>
function mouseover(value) {
document.getElementsByTagName("div")[2].style.clear = value;
}
</script>
</head>
<body>
<input onmouseover="mouseover(value)" type="button" value="both">
<input onmouseover="mouseover(value)" type="button" value="left">
<input onmouseover="mouseover(value)" type="button" value="none">
<input onmouseover="mouseover(value)" type="button" value="right"><br>
<div class="left">left</div>
<div class="right">right</div>
<div class="clear">clear</div>
</body>
</html>
Internal
External