Alex Rivera | Logout

Is clearfix deprecated?

Asked 2011-04-06T11:36:05.643
50

You are aware of the age-old problem: Containers containing floated elements don't automatically expand their height to enclose their children.

One approach to fix this is the "clearfix" which adds a number of CSS rules to ensure a container stretches properly.

However, just giving the container overflow: hidden seems to work just as well, and with the same amount of browser compatibility.

According to this guide, both methods are compatible across all browsers that are important today.

Does this mean that "clearfix" is deprecated? Is there any advantage left in using it over overflow: hidden?

There is a very similar question here: What is the different between clearfix hack and overflow:hidden vs overflow:auto? but the question isn't really answered there.

html css clearfix
Edit
Report

2 Answers

1

I recently discovered to my pleasant surprise that overflow:hidden works perfectly nowadays. I had been using the clearfix method up until around 6 months ago and it is quite bloated in comparison.

answered 2011-04-06T11:47:36.793
1

Note: Make sure you have the correct DOCTYPE set if you're just testing. Caught me out a few times and I always forget!

In IE9 for instance the following just won't work without <!DOCTYPE html> at the top.

<!DOCTYPE html>
<html>

<style>

#bottom_panel {
    overflow: hidden;
    background: orange;
    border:1px solid red;
}

#bottom_panel .col1 {
    background: red;
    float: left;
    width: 100px
}

#bottom_panel .col2 {
    background: yellow;
    float: left;
    width: 70px
}

#bottom_panel .col3 {
    background: green;
    float: left;
    width: 150px
}

.clear {
    clear: both;
}

</style>

<div id="bottom_panel">

    <div class="col1">this is col 1</div>
    <div class="col2">this is col 2. It's taller than the other columns because it's got more text in ot</div>
    <div class="col3">this is col 3</div>

</div>

<div>
This should not be floating around! Should be underneath the columns!
</div>

</html>
answered 2011-04-27T05:09:10.657

Your Answer