How to clear CSS floats without extra markup – different techniques explained

When using floats in CSS, without a doubt you have encountered the interesting effects it will have on the following content. Here I will show you different ways to clear floats without any extra mark-up.

The way to solve it is to use different methods applied to the element containing one or several floated elements. From my experience, there are three major approaches:

  • Floating the containing element as well.
  • Using overflow: hidden on the container.
  • Generating content using the :after CSS pseudo-class.

Floating the container

If you float an element containing floats, it will encompass its content. The side-effect of this is that we add another floated element to the page, while we most of the times want it to behave as a regular block element. That is solved by applying a width of 100% to the container as well, so it forces a line-break before the content after it.

Code

.container-with-float{
    float: left;
    width: 100%;
}

Downsides

  • Setting a width to 100% might collide with desired padding.
  • IE 6 seems to add an extra bottom margin in some cases.

Adding overflow: hidden to the container

If you add overflow: hidden to the containing element, it will automatically adjust its height and take the floated children into account.

Code

.container-with-overflow{
    overflow: hidden;
    /*
        Use height: 1%; or zoom: to trigger hasLayout in IE 6.
        My suggestion is to serve this only to IE 6 through a
        separate stylesheet included with conditional comments.
    */
    height: 1%;
}

Downsides

  • If you want a fluid height, there can be some situations where using overflow can collide with other wanted behavior. A suggestion is to play around with things such as overflow-x: hidden and/or overflow-y: hidden in those cases.
  • hasLayout has to be triggered for IE 6, using height: 1%; or zoom: 1;. My recommendation is to have this in a separate IE 6 stylesheet, included through conditional comments.

Generating content through CSS

Another alternative is to use the CSS pseudo-class :after to generate content after the containing element, using it to clear floats and then hiding itself. Personally, I don’t like this approach since it generates content to the page that has nothing to do there in the first place.

Code

.container-with-generated-content{
    /*
        This is necessary to trigger hasLayout, for both IE 6 and IE 7!
        My suggestion is to serve this only to IE through a
        separate stylesheet included with conditional comments.
    */
    height: 1%;
}

.container-with-generated-content:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Downsides

  • Not IE 6 nor IE 7 supports the :after pseudo-class, so you need to apply a hasLayout fix for both of them. Note that IE 7 also supports a hasLayout fix.
  • It generates content that really hasn’t any semantic value.

A little test page

I’ve put together a little test page where you can see the three different ways to address this problem in action. Play around with it and let me know if you encounter any problems!

Do you use any other approach which works fine for you? Please let me know!

Posted in CSS,Developing,Technology,Web browsers |

Leave a Reply

Your email address will not be published. Required fields are marked *