How to Clear Floated Elements with CSS

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

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.

Comments

http://jason.karns.name jasonkarns

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
  
  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.
  - http://jason.karns.name jasonkarns
    
    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
      
      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
      - http://jason.karns.name jasonkarns
        
        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
        
        Thanks for the discussion. I’m definitely going to use inline-block more often
      - http://jason.karns.name jasonkarns
        
        I also enjoyed the discussion and glad you provided that post. Is it your blog?
      - Anonymous
        
        Not my blog, just the best cross-browser CSS solution to a common problem that I’ve come across.
- http://mogostyle.com Raiman Au
  
  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!
http://jason.karns.name jasonkarns

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.
- http://mogostyle.com Raiman Au
  
  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!
http://gauravmishra.com/ Gaurav Mishra

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.
- http://twitter.com/jaz_design jaz_design
  
  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.
  - http://gauravmishra.com/ Gaurav Mishra
    
    Is it..? will give it a try : ) tagged the post
marie brook

Yarn For Knitting
free online billing system

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.
free online billing system

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.
free online billing system

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.
http://www.rapid-billing.com/ free online billing system

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.
http://www.rapid-billing.com/ free online billing system

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.
http://www.rapid-billing.com/ free online billing system

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.
yes

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

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

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
http://jason.karns.name jasonkarns

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.
http://jason.karns.name jasonkarns

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

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

How to Clear Floated Elements with CSS

Comments

Write for us

Related Articles

Comments

Get Free Gifts ($300 Value)

Write for us

Related Articles