Clearfix hack: A CSS Trick you cannot ignore
We apply various hacks in our everyday life to solve complications and make things easier and comfortable in use. Clearfix is a hack for the developers that solves a CSS layout problem tactfully. Clearfix is neither a CSS property nor an attribute. It is actually an idea, a trick to fix a common CSS problem closely associated with clear and float property.
Contextually, beginners who are anyway uncertain of float and clear property are suggested to check-out these links: Understand CSS Float Property own Way and Figure out CSS clear and float Property.
What Clearfix is
Clearfix technique is used to solve the problem created in float-based layout. When a number of elements (children) float under a container element (parent), children tend to stack with each other horizontally or one overlaps other or overflows outside container. This is a common problem arising during building up any layout including website layout that usually contains header, footer, left-sidebar, middle part, right sidebar etc.
The common way to fix this issue is implementing a CSS class with Parent which automatically clears its children without needing additional coding for the children separately. This tactic is called Clearfix hack in which the CSS class name is typically given .clearfix (though class name can be anything).
However, before we enter the details of which properties and values are included in the .clearfix class and why, let’s explore a bit how much essential and relevant Clearfix is in the present context of language development.
Is Clearfix still relevant?
The clearfix issue is not a new one like you and me. It is since 2004 that clearfix fact put developers and designers into thinking and research which resulted in a number of property:value for .clearfix class. The name which comes first among the clearfix researchers is Holly Begevin.
But note that clearfix is only necessary when you need to build a layout on the basis of CSS float. Over the years since 2004, developers had to rely on Float, Block-inline, Table and so for designing of a layout which noway the perfect alternative to something essential for chalking-out a responsive website.
However it is to fulfill this historic necessity that there came grid and flexbox layout system in CSS. On arrival of grid and flexbox, Clearfix loses its importance to some extent but it is still relevant to the web developers and designers.
The most important reason for this is that Grid and Flexbox layouts are actually involved in the recent updates of CSS. So, they cover up supports of only the recent versions of Browsers. If you need supports of older Browsers, those layout modules are not applicable for you. So, it is obvious that implementation of float layout as well as Clearfix is still relevant in this age.
Properties for .clearfix class
When a child element is taller than its parent, it will overflow outside its container, then we can solve this by using overflow:auto with clearfix class. Follow example 1.
We take a container (parent) div and two elements (children) inside it. One is a Paragraph (p) with text and another an image (img). Observe the CSS coded.
HTML/CSS-1
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid #4CAF50;
padding: 5px;
}
.img {
float: left;
width:140px;
height:140px;
}
</style>
</head>
<body>
<div>
<p>Duis finibus, tortor eu viverra tempus, justo ante viverra lacus, sed cursus dui nibh id orci.</p>
<img class="img" src="pineapple.jpg" alt="Pineapple">
</div>
</body>
</html>
OUTPUT-1
Duis finibus, tortor eu viverra tempus, justo ante viverra lacus, sed cursus dui nibh id orci. Duis finibus, tortor eu viverra tempus, justo ante viverra lacus, sed cursus dui nibh id orci.
We see left-floated image has overflowed outside its container. Now let’s use Clearfix.
HTML/CSS-2
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid #4CAF50;
padding: 5px;
}
.img {
float: left;
width:140px;
height:140px;
}
.clearfix {
overflow:auto;}
</style>
</head>
<body>
<div class="clearfix">
<p>Duis finibus, tortor eu viverra tempus, justo ante viverra lacus, sed cursus dui nibh id orci.</p>
<img class="img" src="pineapple.jpg" alt="Pineapple">
</div>
</body>
</html>
OUTPUT-2
Duis finibus, tortor eu viverra tempus, justo ante viverra lacus, sed cursus dui nibh id orci. Duis finibus, tortor eu viverra tempus, justo ante viverra lacus, sed cursus dui nibh id orci.
All are cleared and solved.
Other properties with clearfix class
Here are other properties that are used with Clearfix class especially for web layout and to place multiple HTML elements side by side-
.clearfix::after {
content: "";
clear: both;
display: table;
}
However, we’re expecting to clarify all of these in any of our CSS tutorials next time.
Hope you have gained a crystal understanding of what Clearfix in CSS is.
