LearnHow to Clear Floated Elements with CSS

Treehouse

Treehouse
writes on May 30, 2011

In this 7-minute video, you’ll learn several different techniques for clearing floated elements using CSS.

A still from the clear fixes video, demonstrating how to clear floated elements.

This video is from Think Vitamin Membership, a high-quality video training site, curated by us at Carsonified and Think Vitamin, with hundreds of short videos on topics like …

New videos are added every week, so it’s a great way to stay up-to-date on all the latest technology and methods. Browse the entire library of videos.

27 Responses to “How to Clear Floated Elements with CSS”

  1. Good post but please try to avoid repeating “let’s go ahead and…” so much. It detracts from your message.

  2. Good post but please try to avoid repeating “let’s go ahead and…” so much. It detracts from your message.

  3. This is
    good news. I must confess that I am very critical of the use of floats for
    the device when it is certainly the best option.

  4. This is
    good news. I must confess that I am very critical of the use of floats for
    the device when it is certainly the best option.

  5. This is
    good news. I must confess that I am very critical of the use of floats for
    the device when it is certainly the best option.

  6. free online billing system on June 15, 2011 at 10:11 am said:

    This is good news.
    I must confess that I am very critical of the use of floats for the device when
    it is certainly the best option.
     

  7. free online billing system on June 15, 2011 at 10:11 am said:

    This is good news.
    I must confess that I am very critical of the use of floats for the device when
    it is certainly the best option.
     

  8. free online billing system on June 15, 2011 at 10:11 am said:

    This is good news.
    I must confess that I am very critical of the use of floats for the device when
    it is certainly the best option.
     

  9. Yes, this technique is awesome without markup. but as these pseduo selectors do not worked in IE!
    so, avoid using these ways.
    and go this way as
    and also which is considered as ugly markup way by some designers in community.

    • It can work in IE 6 and 7, you just have to add two extra bits to the CSS file. http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack/ We use this method of clearfix on all our projects now, it works fine, and it’s beautiful.

  10. Why is anyone using floats anymore? With the ability to finally do display:inline-block reliably cross-browser, there is rarely a need to use floats anymore. The only time floats are needed any more is for their original purpose, which rarely requires float-clearing.

    • omigosh, didn’t know about the use of inline-block like that. I’m glad I got this post and saw your comment, thank you!

  11. Why is anyone using floats anymore? With the ability to finally do display:inline-block reliably cross-browser, there is rarely a need to use floats anymore. The only time floats are needed any more is for their original purpose, which rarely requires float-clearing.

    • Anonymous on May 31, 2011 at 12:06 am said:

      Where’s the advantage? With floats, you can float both left and right and you don’t have to hack letter and word spacing to get left and right margins to work correctly. A clearfix class (using the :after method) in a common base style sheet is simple and reliable.

      • The advantage is that the hacks are only necessary if you need pixel-precision in the widths. If the intermediate white-space is not a problem, the hacks aren’t needed at all. Using floats for layout is a hack that fills a void that no longer exists. Inline-block is purpose-built for this exact scenario. That is, allowing elements to align horizontally while still being styled like block elements. (width/margin/padding) In most layouts, the intermediate white-space is not important anyway.

        • Anonymous on May 31, 2011 at 1:03 am said:

          Yes, I take your point about using a property that was designed for this purpose. However, in my experience the most common use-case for left-floating is a horizontal navigation bar where the intermediate white-space is a problem, so in reality both solutions end up being hacky. Also, can you do cross-browser, equal-height fluid columns with inline-block? For example:

          p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Consolas}

          http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

          • That’s a good post. I admit I was overly critical of using floats for layout as there are certainly cases where they are the best option. It is likely due to the sites that I’ve had to maintain where the previous developers have severely overused and abused floats to such a point where I have a visceral reaction to their usage in any fashion. From my experience, a good 90% (certainly not all) of floats could be replaced with inline-block.

          • Anonymous on May 31, 2011 at 2:43 am said:

            Thanks for the discussion. I’m definitely going to use inline-block more often 🙂

          • I also enjoyed the discussion and glad you provided that post. Is it your blog?

          • Anonymous on May 31, 2011 at 4:09 am said:

            Not my blog, just the best cross-browser CSS solution to a common problem that I’ve come across.

    • omigosh, didn’t know about the use of inline-block like that. I’m glad I got this post and saw your comment, thank you!

Want to learn more about CSS?

Learn how CSS allows you to apply visual styling to HTML elements with colors, fonts, layouts, and more.

Learn more