CSS clearfix not working

css clearfix
user369246 picture user369246 · Jun 14, 2013 · Viewed 11.8k times · Source

This (http://jsfiddle.net/77RRA/1/) is working, while this (http://jsfiddle.net/77RRA/) is not.

Isn't clearfix supposed to substitute the line <div style="clear: both;"></div>?

Answer

Christoph picture Christoph · Jun 14, 2013

Isn't clearfix supposed to substitute the line <div style="clear: both;"></div>

Yes. The clearfix is there to avoid a non-semantic empty tag. However, for this to work you need to place it on the parent element. (Example)

In your case however, it does not address the problem that siblings will ignore the floated element. This is not the intend of clearfix, you simply add clear:right (or both as you will) on your #child sibling to restore the normal document flow.

your fixed Example

Related questions

What is a clearfix?

Recently I was looking through some website's code, and saw that every <div> had a class clearfix. After a quick Google search, I learned that it is for IE6 sometimes, but what actually is a clearfix? Could you …

Read More
What methods of ‘clearfix’ can I use?

I have the age-old problem of a div wrapping a two-column layout. My sidebar is floated, so my container div fails to wrap the content and sidebar. <div id="container"> <div id="content"></div> &…

Read More
How do you keep parents of floated elements from collapsing?

Although elements like <div>s normally grow to fit their contents, using the float property can cause a startling problem for CSS newbies: If floated elements have non-floated parent elements, the parent will collapse. For example: <div&…

Read More