Float alignment using clearfix

from: http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning/

The Clearfix Technique

Depending on the context of the floated elements a better technique to contain floats may be the clearfix technique. The clearfix technique is a bit more complex but does have better support as compared to the overflow technique.

The clearfix technique is based off using the :before and :after pseudo-elements on the parent element. Using these pseudo-elements we can create hidden elements above and below the parent containing the floats. The :before pseudo-element is used to prevent the top margin of child elements from collapsing by creating an anonymous table-cell element using the display: table; declaration. This also helps ensure consistency within Internet Explorer 6 and 7. The :after pseudo-element is used to prevent the bottom margin of child elements from collapsing, as well as to clear the nested floats.

Adding the *zoom property to the parent element triggers the hasLayout mechanism specifically within Internet Explorer 6 and 7, which determines how elements should draw and bound their content, as well as how elements should interact with and relate to other elements.

Taking the same example from above you can see how the floats are contained and the elements are able to live outside of the parent element.

1
2
3
4
5
6
7
8
9
10
11
12
.box-set:before,
.box-set:after {
  content: "";
  display: table;
}
.box-set:after {
  clear: both;
}
.box-set {
  *zoom: 1;
}

Clearfix Technique Demo

Note: middle box does not align because it’s css is:
.box:nth-child(2) {
position: relative;
top: 20px;
}

Effectively Containing Floats

Which techniques to use boils down to the content at hand and your personal preference. Some people prefer to stick strictly with the clearfix technique as it is consistent across the board. Others feel the clearfix technique is a bit too much code in some cases and prefer a mix of techniques based on the content. What you decide to use is up to you, just make sure it is well documented and easily identifiable either way.

One common practice is to assign a class to the parent element which includes the floats needing to be contained. Using the clearfix technique for example, Dan Cederholm helped coin the class name group. The group class name can then be applied to any parent element needing to contain floats.

1
2
3
4
5
6
7
8
9
10
11
12
.group:before,
.group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}
.group {
  *zoom: 1;
}

Single Pseudo-Elements

It is worth noting only one :before and one :after pseudo-element are allowed per element, for the time being. When trying to use the clearfix technique with other :before and :after pseudo-element content you may not achieve the desired outcome.

In the examples above, the clearfix styles would not live under the box-set class. Instead, the class of group would need to be added to the parent element containing the floats.

Leave a comment