Last weekend I gave a presentation at PFCongres 2011 about the efficient use of CSS. When I was talking about floating elements that can be cleared with clear & clearfix classes, someone in the audience pointed out the clearing technique 'overflow:hidden'. I had to admit that I had never heard of this technique before and would research it later. After doing this research I found out that I had actually read about the technique years ago in the book 'Pro CSS Techniques'. Back then I had already decided to focus my attention on the clearfix method over the 'float everything' and 'overflow:hidden' techniques. Even though the 'overflow:hidden' technique might seem like the best choice when looking at the markup, the technique is actually lacking in several areas.

Image credits: cHOpiL

Well-known methods for clearing floats

Several methods will first be discussed that can be used to clear floats.

Float everything

The best way to float elements is to make sure their parent floats as well. This technique doesn't require any markup either. While this might seem like the perfect solution, it comes with a major disadvantage.

Say you want to have a photo in a blockquote element next to both the title, the quote itself and the name of the quoted person. The way this is handled is by adding 'float:left' to 'blockquote p img'. Next you should also float the 'p' and 'blockquote' element if you don't want them to drop out of the parent. Following this logic you should keep adding floats to elements until you've reached the 'body' tag. The result is a 100% floating website.

Why I wouldn't recommend to use this technique is because of the unclarity it creates in the code. Container elements just shouldn't float and making them do so anyway will get you lost in your own code sooner or later. You could use this method perfectly well for horizontal menus and such, but do make sure that the parent element of your menu has a different clearing method.

Overflow:hidden

While this seemed like a very good technique at first glance, more and more disadvantages started popping up when I researched it more thoroughly. One of these disadvantages is that it's apparently not possible to place any elements with 'position:absolute' outside the container which has the 'overflow:hidden' on it. The reason for this is that everything that falls outside the container will be 'hidden'. It goes without saying that this is a very limiting factor! Of course it's also possible to use 'overflow:auto' instead of 'overflow:hidden' but this will cause scroll bars to appear in some cases, which you probably don't want either. Yet another possibility is to use 'overflow-y:hidden' which will cause things to disappear in the height, but not in the width. I just can't help to see these methods as convulsive attempts to keep using the seemingly simple 'overflow:hidden' technique. The truth is that instead of always going for the default 'overflow:hidden' for clearing elements, you should evaluate every situation differently and choose the overflow that best suits it. Don't forget to keep in mind future uses of your code!

Many advocates of this technique used them on smaller elements of which it was clearer that there wouldn't be any problems. With horizontal suckerfish menus, inline pop-ups and tooltips people were often using the clearfix method already. More and more of those advocates are finding out that the 'overflow:hidden' technique is getting more and more difficult to use every day. With CSS3 slowly becoming mainstream, even more limitations are surfacing. Many common CSS3 values such as 'box-shadow' and 'text-shadow' fall outside the 'box' and with that also outside of 'overflow:hidden' and will therefore not be visible when that technique is used to clear the floats.

On December 10th 2009(!) Andy Ford mentioned in his blog 'Saying Goodbye to the overflow: hidden Clearing Hack' that he - as a former strong advocate of the 'overflow:hidden' technique - was saying goodbye to it. The drip that caused the proverbial bucket to overflow (no pun intended) was CSS3 in his case as well. After posting the blog he put up a demo showing how both shadows and transforms don't go well with the 'overflow:hidden' and 'overflow:auto' techniques.

Clearfix

The big advantage of the clearfix method is that you can use 'position:absolute', tooltips, CSS3 and all other CSS I've mentioned before without any problems. The big disadvantage however is that extra HTML markup is needed. Many people are very skeptical about this technique for that reason. Of course this problem can easily be fixed by using two containers and always giving the inner container the same name.

    

        information
    



    

        information
    


    

        information
    

By doing this you can use the :after selector to the wrap, causing the .clearfix method to be obsolete. In special cases requiring only one container, you could do the following:

    information


    

        information
    


    

        information
    

.wrap:after,
#header:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

Conclusion

The best closing I could give this article is by confessing that from now on I will only use a modified clearfix method with as few extra markup as possible. Fact is that I was already using this methods in every possible situation. The motivation for writing this blog was therefore to convince others that are devoted believers in the 'overflow:hidden' tactic that their way of solving this problem is suboptimal, or at least being made so by the upcoming CSS3.