CODEWITHSUNDEEP
htmlcss
Jitendra Vyas
Jitendra Vyas

Reputation: 152697

Why HTML5 BoilerPlate, Blueprint and 960.gs CSS framework use Clearfix over overflow:hidden?

Why HTML5 BoilerPlate, Blueprint and 960.gs CSS framework use Clearfix over overflow:hidden?

Why overflow:hidden is not preferred? To use clearfix every-time I need to add clearfix class to html element but I can add overflow:hidden to the element in css without modifiying html.

Please explain with example the disadvantage to use overflow:hidden

Is clearfix class not mixing the presentation with content?

Upvotes: 2

Views: 552

Answers (2)

powerbuoy
powerbuoy

Reputation: 12838

I think the reason the .clearfix-class doesn't just contain overflow: hidden; is because in some cases you do not want overflow set to hidden but you still want the element to clear itself.

Regarding using class="clearfix" all over your HTML I definitely agree that it's "mixing the presentation with content".

Personally I use SASS to avoid having to use classes for everything. With a SASS mixin I can simply go:

#foo {
    @include clearfix;
}

And still have the benefit of changing all my clearfix styling from one place.

Upvotes: 3

PseudoNinja
PseudoNinja

Reputation: 2856

Well let me answer your question with a question (and then answer them).

Q: Why do we use classes in CSS?

A: To allow us to create re-usable code.

Q: Well thats great and all, but how does it apply to this situation?

A: When the next browser engine is released (probably IE breaking everything again) and your overflow:hidden no longer works you will have to go in and change every instance you created using it. Whereas if you were using the class all you have to do is update the code in one place, and voila everything works.

tl;dr; future-proofing.

Upvotes: 2

Related Questions