Loading...

CSS Clearfix for Floating Elements

css clearfix for floating elements
To control floating elements is a problem for the developers who are in their initial stages of learning. There are many developers who have invented different method to solve floating issue and save developers penalty of time.

ClearFix

When we apply float attribute to any of the element in HTML, floated elements are removed from the normal document flow. Therefore, the parent container can't calculate the height of the content in the container and collapse. To fix this, we need to clear the floats, which essentially means it will be put back into the normal document flow.
Now a days if you are using IE 8 and up, following clearFix method is fine. You just have to do is after adding CSS style in your sytlesheet, just apply a class="clearfix" to the parent element in which the floating element is.
.clearFix:after {
  content: "";
  display: table;
  clear: both;
}
But if you want your site to be compatible with older versions of Internet Explorer like IE 6 or 7 use the following clearFix method.

The "ClearFix" Hack

This is the clearfix method known as The "ClearFix" Hack which force element to self-clear its children
.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 */
This method was improved by Jeff Sterr and it was based on the assumption that No body in the world use IE on the MAC.
.clearfix:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
 }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
After the method was developed by Jeff Sterr, different developer thought that although it's applicable but still there are some unnecessary attributes which need to be fixed.

Different Concept of developers by the updated clearfix method of Jeff Sterr.

Dan Cederholm: "group" class name is nicer and more semantic i.e. class="group"
Nicolas Gallagher: Content can be a empty string and doesn't necessarily be a space. We can use content: ""; Instead of content: " ";
Chris Coyier: Without any text, font-size is unnecessary.
In the end following results were concluded.
.group:before,
.group:after {
    content: "";
    display: table;
} 
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

Micro ClearFix by Nicholas Gallagher

On May 18, 2011 Nicholas Gallagher once again makes an update based on research to improve cross browser compatibility.
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1;
}
CSS Tricks 2602566537556858239

Post a Comment

Please Avoid Spamming. Comments will be moderated before they are published.

emo-but-icon

Home item

Follow by Email

WPReads.com aims to provide everything that can help you master wordpress, I am Farsab, a creative webdev who likes to spread knowledge through writing on different topics such as web development concepts, tutorials, SEO, CSS and much more . Feel free to

Popular Posts