Up until recently, I’ve been clearing nested floats the incorrect way – by adding additional markup to my HTML documents that added no semantic value. In fact, I didn’t even realize there was a “clearfix” debate or what “clearfix” even meant. (If you’ve never run into this problem, check out this little emulator on SitePoint. Notice how the white background doesn’t expand to encapsulate the sidebar as the sidebar gets longer.)
A comment in the code of Harry Roberts’ inuit.css pointed me to Nicolas Gallagher’s micro clearfix hack, which is a pretty efficient way to clear nested floats with a minimum of additional markup. However, additional markup is still required in his solution.
It seems to me that the best solution is one that was posted in 2005 by Peter-Paul Koch on QuirksMode. His solution requires no additional markup, and appears to have the exact same results in my own tests.
Please let me know if I overlooked something.
Here’s the difference between the two methods:
Obviously, the first method pictured clips the image because its parent container is set to overflow: hidden. I should have realized the difference by looking at the code, but hopefully the diagram above will help someone else who’s confused over the issue.
It’s helpful to know both methods and when to use each one, as Nicolas even points out in the comments section on his post.