What is the role of the CSS rule “clear: both”?
What is the CSS rule “clear: both”?
We use the “float” property in CSS to float an element to the left or right. Therefore, whenever we set the “float” property for any HTML element, it is taken out of the normal flow of the document and can sometimes create a lot of problems.
The CSS “clear” property allows developers to set the position of elements adjacent to the floated element. However, it always pushes the next element below the floated element.
The CSS “clear” property can have four different values: ‘left’, ‘right’, ‘both’, and ‘inherit’. The ‘left’ value pushes the next element below the left-floated element. The ‘right’ value pushes the next element below the right-floated element. The ‘both’ value pushes the next element below both the left-floated and right-floated elements.
In this tutorial, we’ll discuss “clear” using some examples. The “both” value for the CSS property.
Syntax
Users can use the “clear: both” CSS rule with the following syntax.
Css_selector {
Clear: both;
}
In the above syntax, CSS_selector is used to select elements next to the floated element.
Example 1
In the following example, the “parent” div element contains a “child” element and a “text” element. Following this, we also set fixed dimensions and the “float: left” property for both the child element and the floated element.
We use the “clear: both” CSS property with the “text” element. In the output, users can observe that the text content has been shifted down instead of floating to the right of the child div element.
<html>
<style>
.parent {
width: 500px;
height: 300px;
background-color: green;
border-radius: 12px;
border: 3px solid orange;
}
.child1 {
width: 200px;
height: 200px;
background-color: red;
border-radius: 12px;
border: 2px dotted pink;
margin: 10px;
float: left;
}
.text {
font-size: 1.2rem;
clear: both;
color: white;
height: 20px;
}
</style>
<body>
<h3>Use the "clear: both" CSS property to push the next element below the left-floated element</h3>
<div class = "parent">
<div class = "child1"> </div>
<p class = "text">Hey! How are you? Are you okay? </p>
</div>
</body>
</html>
Example 2
In the following example, the parent element contains multiple “child” elements. Furthermore, it contains “clear” div elements between the multiple “child” elements. We set the “float: right” CSS property for each child div element.
In addition, we also set the “clear” div element via the “clear:both” CSS property. In the output, users can observe that all div elements float to the right. And, since the “clear” div is in the middle of the child div elements, the “clear:both” CSS property shows all the child elements immediately below it.
<html>
<style>
.parent {
width: 600px;
height: 300px;
background-color: blue;
border-radius: 12px;
border: 3px solid orange;
}
.child {
width: 100px;
height: 100px;
border: 2px dotted pink;
margin: 10px;
background-color: white;
border-radius: 12px;
float: right;
}
.clear { clear: both;}
</style>
<body>
<h3>Use the "clear: both" CSS property to push the next element below the left-floated element</h3>
<div class = "parent">
<div class = "child"> </div>
<div class = "child"> </div>
<div class = "child"> </div>
<div class = "clear"> </div>
<div class = "child"> </div>
<div class = "child"> </div>
</div>
</body>
</html>
Example 3
In the following example, we create the main div element. The left div element floats to the left, and the right div element floats to the right.
In the output, the user can use radio buttons to set the “clear” property to a value of “both” or “none.” The user can select different radio buttons and observe the output. When we select “both,” it shows the center div below both floating div elements.
<html>
<head>
<style>
.main {
width: 600px;
height: 200px;
background-color: pink;
border-radius: 12px;
border: 3px solid orange;
margin-bottom: 20px;
}
.right,
.left {
width: 200px;
height: 120px;
background-color: aqua;
}
.right {float: right;}
.left {float: left;}
.center {
width: auto;
height: auto;
font-size: 2rem;
background-color: yellow;
color: blue;
clear: both;
} </style>
</head>
<body>
<h3>Use the "clear: both" CSS property to push the next element below the left floated element</h3>
<div class = "main">
<div class = "left"> </div>
<div class = "right"> </div>
<div class = "center">This is the div that is centered between the left and right div elements. </div>
</div>
<input type = "radio" name = "clear" id = "both" value = "both" checked />both
<input type = "radio" name = "clear" id = "none" value = "none" />none
<script>
let allRadio = document.getElementsByName('clear');
console.log(allRadio)
for (let i = 0; i < allRadio.length; i++) {
allRadio[i].addEventListener('click', () => {
console.log(allRadio[i].value)
let centerDiv = document.getElementsByClassName('center');
centerDiv[0].style.clear = allRadio[i].value;
})
} </script>
</body>
</html>
We’ve seen various uses for the “clear: both” CSS property. We used the “clear” property to reveal the next element below a floated element. Developers should use the “clear” CSS property when they are unsure of the size of the next element below a floated element; otherwise, overflow of the HTML element may occur and look strange.
However, when using the “float” property, users can use the “overflow” CSS property to resolve overflow issues.