The clear property specifies whether to display an element horizontally next to any floating element. It allows you to specify on which side(s) of the element no floating element is allowed.
CSS
clear: value;
If an element has one or many floating elements on its left side, then this property can be used to clear its left side from any floating element by moving the element down. Similarly, its right side can also be cleared using this property which again result in the element moving down. You can also simultaneously clear both the left and the right side of an element from any float.
This property works for both floating as well as non-floating elements. Before proceeding, you must be familiar with the float property.
Values
none : The element does not move down and allows floating elements on both its sides. This is the default value.
left : The element moves down to clear past floats on its left side.
right : The element moves down to clear past floats on its right side.
both : The element moves down to clear past floats on both its left and right sides.
initial : Sets the default value of the property.
inherit : Inherits the value from parent element.
Working of clear property
As stated earlier, this property is used to clear floats from one or both sides of an element by moving it below them. Let's understand this with three examples.
clear: left
Suppose you have a div element with some explicitly defined width and height and a paragraph, and the div is given float: left to make it a left floating element. This will make the div to float to the left and the paragraph to wrap around its right side.
On giving clear: left to the paragraph, it will move down so that it no longer has the floating element on its left side, as shown in the following figure.
The same is shown in the following demo.
HTML
<div>float left</div>
<p>Lorem ipsum .... vehicula eu.</p>
CSS
div {
width: 80px;
height: 80px;
background-color: #4c6078;
text-align: center;
color: white;
float: left;
}
p {
clear: left;
}
See the Pen clear: left example by Aakhya Singh (@aakhya) on CodePen.
clear: right
If the div in the above example is given float: right, then it will float to the right and the paragarph will wrap it around its left side. Therefore, giving clear: right to the paragraph will move it below the floating element so that it no longer has the floating element on its right side, as shown in the following demo.
HTML
<div>float right</div>
<p>Lorem ipsum .... vehicula eu.</p>
CSS
div {
width: 80px;
height: 80px;
background-color: #4c6078;
text-align: center;
color: white;
float: right;
}
p {
clear: right;
}
See the Pen clear: right example by Aakhya Singh (@aakhya) on CodePen.
clear: both
Take an example of a paragraph and two div elements, one floated left and the other right. Both the div elements are explicitly given some width and height, with the height of the right floating div greater than that of the left floating div.
If the paragraph is defined after both the div elements in HTML, then the paragraph will wrap around the right and the left side of the left and the right floating element respectively. Now, if the paragraph is given clear: left, then the paragraph will move below the left floating element as seen in an above case, while still wrapping around the right floating element. If it is given clear: right, then it will move below the right floating element, thus moving below both the floating elements because the height of the right one is greater than that of the left one.
On giving clear: both to the paragraph, it will move below both the floating elements. This is because the clear value both is used to clear the floats from both sides of an element. All the three cases are shown in the following figure.
A demo for the same is given below in which left and right are the ids of the left and right floating elements respectively.
HTML
<div id="left">float left</div>
<div id="right">float right</div>
<p>Lorem ipsum .... vehicula eu.</p>
CSS
div {
background-color: #4c6078;
text-align: center;
color: white;
}
#left {
width: 80px;
height: 80px;
float: left;
}
#right {
width: 80px;
height: 100px;
float: right;
}
p {
clear: both;
}
See the Pen clear: both example by Aakhya Singh (@aakhya) on CodePen.
Note that the clear property applied to an element only clears the past floats on its sides, i.e., it only clears the floating elements which are defined before the element in HTML.
In the following demo, the left floating element is defined before the paragraph, and the right floating element is defined after it. So, giving clear: both to the paragraph moved it below the left float but not the right float.
HTML
<div id="left">float left</div>
<p>Lorem ipsum .... sollicitudin.</p>
<div id="right">float right</div>
CSS
div {
width: 80px;
height: 80px;
background-color: #4c6078;
text-align: center;
color: white;
}
#left {
float: left;
}
#right {
float: right;
}
p {
clear: both;
}
See the Pen clear: both example by Aakhya Singh (@aakhya) on CodePen.
More Examples
The need for the clear property arises because it may be undesirable to display a floating element next to any another element in many cases. For example, it may not give the desired results on resizing screen or if an element is a textarea. One such example is discussed below.
Take an example of a web layout created using the float property like the one shown below.
This can cause an undesirable result if the height of one sidebar is smaller than that of the other, as shown in the following figure.
This can be corrected by clearing the footer so that it remains below both the floating columns.
CSS
#footer {
clear: both;
}
For a better result, give float: left to the first sidebar and a margin-left value to the other, and clear: left to the footer as shown in the following demo.
See the Pen Designing web page with floats by Aakhya Singh (@aakhya) on CodePen.
Have a look at another example.
See the Pen clear: both example by Aakhya Singh (@aakhya) on CodePen.
All the three blocks are given float: left and the orange block is given clear: both. Since the clear property does not clear the floats defined after the element, so the orange block did not move below the blue block on its right side.
Browser Support
This property is supported in all the major browsers.
