Clearfix is one type of hack method to force the container’s(which has floating element inside) height based on the floated element. This is also know as Easy Clearing Hack. You can use this below code to avoid that layout issue arise by that floated element on all browsers.
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
Above CSS code containing the content: “.”; property. I have found that the period (or dot) specified in quotes has a nasty tendency to break certain layouts. By adding a literal dot after the .clearfix division (i.e., via the .clearfix:after selector), the clearfix hack creates a stumbling block for certain browsers. And not just for Internet Explorer — depending on the layout, even Firefox will choke a layout upon tripping on an :after-based pseudo-dot. The solution to this subtle design chaos? Replace the literal dot with a single blank space: “content: ” “; — this trick has proven successful so consistently that I now use it as the default property in every clearfix hack that I use.
