What are the various techniques for clearing floats in CSS ?
Last Updated :
27 Jan, 2022
In this article, we will learn various techniques for clearing float. Before diving into this topic, we will know the float property in CSS. The float property in CSS is used to change the normal flow of an element. The float property defines where should be an element positioned (right or left) in a container.
Purpose of clearing floats in CSS: We clear the float property to control the floating elements by preventing overlapping.
Various techniques to clear float
Clear property: The clear property is used to specify which side of floating elements are not allowed to float. It sets the position of the element concerning floating objects. The element can fit horizontally in the space next to another element that is floated. We have to apply the clear property to that element in the same direction as the float so that the element will move down below the floated element.
Syntax:
clear: none|left|right|both|initial;
Property values:
- none: It is the default value of the clear property. After using this value the element will not be pushed left or right floated elements.
- right: This value pushes the element right below the floated elements.
- left: This value pushes the element left below the floated elements.
- both: This value pushes the element left and right to the floated elements.
- initial: Change the properties to their default value.
- inherit: Inherit the floating properties to their parent element.
Example: In this example, we have used the left value of clear property to specify that the paragraph element is not allowed to float on the left side concerning other floated elements.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: left;
width: 100;
}
p {
clear: left;
}
</style>
</head>
<body>
<h2>clear property</h2>
<img src=
<p>
This will specify that paragraph element
is not allowed to float on the left side
in relation to other element.
</p>
</body>
</html>
|
Output:
The Overflow method: A clearfix is a way for an element to automatically clear or fix its elements so that it does not need to add additional markup. It is generally used in float layouts where elements are floated to be stacked horizontally. If the element is taller than the element containing it then use the overflow property of CSS by setting its value as auto to overcome and fix the problem.
Example: In this example, there are two HTML div elements with images floated to right. The height of the floated image is taller than the div elements containing the image, so the image will overflow outside the container. In the second div element with the class name “clearfix“, we have added overflow property value to auto to fix the problem.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid #4CAF50;
padding: 5px;
}
.img1 {
float: right;
}
.img2 {
float: right;
}
.clearfix {
overflow: auto;
}
</style>
</head>
<body>
<h2>Without Clearfix</h2>
<div>
<img class="img1" src=
alt="GFG" width="170" height="170" />
A clearfix is a way for an element
to automatically clear or fix its
elements so that it does not need
to add additional markup. It is
generally used in float layouts
where elements are floated to be
stacked horizontally.
</div>
<h2 style="clear:right">With Clearfix</h2>
<div class="clearfix">
<img class="img2" src=
alt="GFG" width="170" height="170" />
A clearfix is a way for an element to
automatically clear or fix its elements
so that it does not need to add additional
markup. It is generally used in float
layouts where elements are floated to
be stacked horizontally.
</div>
</body>
</html>
|
Output:
ClearFix Hack: It is the new modern hack of clearfix as it is much safer to use. With overflow: auto we have to adjust margin and padding accordingly else it will create scrollbars. Hence it’s better to use a new modern clearfix hack. This method uses a CSS ::after pseudo-selector to clear floats.
Syntax:
.clearfix::after {
content: "";
clear: both;
display: table;
}
Example: In this example, there are two HTML div elements with images floated to right. In this example, we have made two HTML div elements with images floated to right. But the height of the floated image is taller than the div elements containing the image, so the image will overflow outside of its container. It happens in the first HTML div element. In the second div element with the class name “clearfix”, we have used clearfix hack to fix the problem.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid #4CAF50;
padding: 5px;
}
.img1 {
float: right;
}
.img2 {
float: right;
}
.clearfix::after {
content: "";
clear: both;
display: block;
}
</style>
</head>
<body>
<h2>Without Clearfix</h2>
<p>
This image is floated to the right.
It is also taller than the element
containing it, so it overflows
outside of its container:
</p>
<div>
<img class="img1" src=
alt="GFG" width="170" height="170" />
Without adding clearfix hack
to the containing element
</div>
<h2 style="clear:right">
With New Modern Clearfix
</h2>
<div class="clearfix">
<img class="img2" src=
alt="GFG" width="170" height="170" />
Add the clearfix hack to the containing
element, to fix this problem:
</div>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...