CSS Clearfix Hack

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.Clearfix Hack

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.

Leave a Reply

Your email address will not be published. Required fields are marked *