What is the Use of Clearfix in CSS

What is the Use of Clearfix in CSS? The “Clearfix” in CSS is a method for an element to automatically fix or clear its elements. This will not require any further markup code. This “Clearfix” idea is used with float layouts where elements are floated to be stacked horizontally. If any HTML component is bigger than the inner contained element then we used the overflow property of CSS to overcome this issue.

Let’s suppose we have paragraph content in an HTML div tag and also this div tag has an image. But image does not become in the div tag then we must use the “Clearfix” idea. We can also defeat this problem by increasing the div tag element height or applying float property to that element. You can follow the below image before and after applying the Clearfix idea.

How does Clearfix work in CSS?

CSS clearfix is used to fix the overflow elements from the wanted element. This can be operated with 3 properties:

1. Overflow Property
2. Height Property
3. Float Property

All three CSS properties are used for fixing the overflow elements.

overflow: auto
height:30px;
float;left;

What is the Use of Clearfix in CSS?

Example 1.

<div class="container2">
 <img class="image2" src="https://i.imgur.com/RM8ffac.jpg" alt="Pineapple" width="170" height="170">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</div>
<style type="text/css">
.container2 {border: 3px solid #4CAF50;padding: 20px;
}.image2 {float: right;}
</style>

Example 2.

<div class="container">
<div class="clearfix">
 <img class="image" src="https://i.imgur.com/RM8ffac.jpg" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
</div></div>
<style>
.container {border: 3px solid #4CAF50;padding: 5px;}
.clearfix {overflow: auto;}
.image{float: right;}
</style>

Conclusion

The Clearfix in CSS is utilized for overflowing elements of HTML. This Clearfix idea can be done by setting height or setting overflow property or setting float property to the wanted element to overcome the overflow of elements.

Have a nice day.