Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What does the CSS rule “clear: both” do?
We use the ‘float’ property in CSS to keep elements floating on the left or right side. So, whenever we set the ‘float’ property for any HTML element, it is taken out from the document's normal flow, and sometimes it can create lots of problems.
The ‘clear’ CSS property allows developers to set the position of the element which is next to the floating element. However, it always pushes the next element below the floating elements.
The ‘clear’ property of CSS can have 4 different values: ' left’, ‘right’, ‘both’, and ‘inherit’. The ‘left’ value is used to push the next element below the left-floated element. The ‘right’ value is used to push the next element below the right-floated element. The ‘both’ value is used to push the next element below the left-floated and right-floated elements.
In this tutorial, we will discuss the ‘both’ value of the ‘clear’ CSS property with some examples.
Syntax
Users can follow the syntax below to use the ‘clear: both’ CSS rule.
Css_selector {
Clear: both;
}
In the above syntax, CSS_selector is used to select an element that is at the next of the floating elements.
Example 1
In the example below, the ‘parent’ div element contains one ‘child’ element and a ‘text’ element. Here, we have given the fixed dimension to the parent element. After that, we also set the fixed dimension for the child element and the ‘float: left’ property.
We have used the ‘clear: both’ CSS property with the ‘text’ element. In the output, Users can observe that the text content is gone below rather than floating at 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> Using the <i> clear: both </i> CSS property to push the next element at below of left-floated element </h3>
<div class = "parent">
<div class = "child1"> </div>
<p class = "text"> Hey! How are you? Are you fine? </p>
</div>
</body>
</html>
Example 2
In the example below, the parent element contains multiple ‘child’ elements. Also, it contains the ‘clear’ div element between multiple ‘child’ elements. We have set the ‘float: right’ CSS property for every child div element.
Furthermore, we have set the ‘clear: both’ CSS property for the ‘clear’ div element. In the output, users can observe all div elements floating towards the right. Also, as the ‘clear’ div is in the middle of the child div elements, the ‘clear: both’ CSS property shows all child elements below the ‘clear’ div, which are next to 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> Using the <i> clear: both </i> 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 example below, we have created the main div element. The ‘left’ div element is floating towards the left in the container, and the right div element is floating towards the right in the container.
In the output, users can use the radio buttons to set the ‘both’ or ‘none’ value for the ‘clear’ property. Users can select a different radio button 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> Using the <i> clear: both </i> CSS property to push the next element at below of left-floated element </h3>
<div class = "main">
<div class = "left"> </div>
<div class = "right"> </div>
<div class = "center"> This is a div in the center of the left and right div element. </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 have seen the various usecases of the ‘clear: both’ CSS property. We have used the ‘clear’ property to show the next element at the below of floating elements. Whenever developers are not sure about the dimensions of the next element of the floating element, they should use the ‘clear’ CSS proeprty; Otherwise, overflow of the HTML elements can happen and it can look weired.
Howerver, users can solve the problem of overflowing using the ‘overflow’ CSS property while using the ‘float’ property.
214 Views
