It was recently announced that a very new display property is going to be added which will help browsers to handle the issue of floating elements very effectively. But, until all that happens, we can use this clearfix HTML hack which is the best until now.
A clearfix hack is an amazing method of CSS which is used for elements to clear its child elements, so you don't have to add any additional markup. This little CSS hack has been literally saving the responsive website designers from hours of headache.
The HTML clearfix is basically used in the design layouts where we have the elements floated in order to stack them horizontally.
For a better understanding of what actually the issue is, look at the following example.
The first image shows you the rendering issue that sometimes occurs when using the CSS float property.
The second image shows how the elements should actually get rendered. And that is what a clearfix does, properly render the floated elements in your website design.
For a long time, I had been using the Nicolas Gallagher's, what he calls the Micro Clearfix Hack to address the issue for floated elements.
Then one fine day I came across Thierry Koblentz's more simpler approach for this.
Thierry Koblentz called his clearfix class as 'btcf', which he told, stands for 'Beat That Clearfix'.
I have been using this approach for a long time now and works great with the modern browsers, but I still keep the micro clearfix hack handy in a case when I am going to design a mobile friendly website for the clients who still tend to use some older browsers. :)
A clearfix hack is an amazing method of CSS which is used for elements to clear its child elements, so you don't have to add any additional markup. This little CSS hack has been literally saving the responsive website designers from hours of headache.
The HTML clearfix is basically used in the design layouts where we have the elements floated in order to stack them horizontally.
For a better understanding of what actually the issue is, look at the following example.
The first image shows you the rendering issue that sometimes occurs when using the CSS float property.
The second image shows how the elements should actually get rendered. And that is what a clearfix does, properly render the floated elements in your website design.
For a long time, I had been using the Nicolas Gallagher's, what he calls the Micro Clearfix Hack to address the issue for floated elements.
/* For modern browsers */
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
*zoom:1;
}
Then one fine day I came across Thierry Koblentz's more simpler approach for this.
.btcf:after {
content:"";
display:table;
clear:both;
}
Thierry Koblentz called his clearfix class as 'btcf', which he told, stands for 'Beat That Clearfix'.
I have been using this approach for a long time now and works great with the modern browsers, but I still keep the micro clearfix hack handy in a case when I am going to design a mobile friendly website for the clients who still tend to use some older browsers. :)