CSS Clearfix Hack is one of the most popular CSS hacks for clearing floats. The clearfix hack is also known as the Easy Clearing Hack which is used to clear floated divisions (divs) without using structural markup.
For Example: If you have <div> which contains two other <div> tags. Those two child tags are both floated as per your need. Let’s suppose that there’s even content between those two floated elements. If the content doesn’t have at least the height of the floated elements, the container <div> will not span the height it should.
To solve this type of floating issues then just add the following Clearfix CSS hack in your stylesheet(stye.css) and add apply a class=”clearfix” to the parent element.
/* clearfix hack */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix {
display: inline-block;
}
/* start commented backslash hack \*/
* html .clearfix {
height:1%;
}
.clearfix {
display: block;
}
/* close commented backslash hack */
These CSS Clearfix hacks can be really helpful to you in the long run. If there’s any other code you guys are using besides this, then please consider mentioning in the comments section below.