Clearfix: Height 1%

Question

In the premium templates on ThemeForest, I see that many templates adopt this method to clearfix:

.clearfix {
    height: 1%;
}

And add the class clearfix to various elements.

Why height 1%? Is a good way?

score 1 · Answer 1 · edited May 23 '17 at 12:06

1

Your theme includes that class for compaitibility with Internet Explorer, which is a good thing.

https://css-tricks.com/snippets/css/clear-fix/

https://perishablepress.com/lessons-learned-concerning-the-clearfix-css-hack/

What methods of ‘clearfix’ can I use?

edited May 23 '17 at 12:06

Community

1
1

answered May 31 '15 at 19:15

jmargolisvt

5,722
4
29
46

score 1 · Accepted Answer · answered May 31 '15 at 19:15

Setting the height explicitly is the safest (read not the cleanest) way to clear floats. In the themes, the actual clearfix implementation would use :after pseudo selector to clear floats. However the :after property is not supported in IE6/7. Thus, height: 1% is specified. Which works in IE6/7.

Source http://www.pewpewlaser.com/articles/clearfix-ie

Clearfix: Height 1%

2 Answers2