When you float elements, you often need to clear them. There are various ways for doing so...
Adding a block-level element after the floated element. This is typically a "br" or a "div" with the style of "clear: both;" If you want a heightless clearing element, you can do ...
clear:both;
height: 0px;
line-height: 0px;
font-size:1px;
Note that if you have nested floats and clear, the inner clear can sometimes clear all the float including ones outside of its container. One trick to stop that is to float the containing div.
The traditional method involves adding an extra markup element. Some people didn't like this extra code bloat and came up with this method which does not need extra markup (just extra CSS). See Easy Clearing on PositionIsEverything.net
Then someone discovered that if you put "overflow:auto" on the containing div, it will have the same effect as a clear at the bottom of the floats. See this item (d) method described on this sitepoint article.
If you float the containing div, then it will contain the float inside as if there was a clear at the bottom of the floats. See this item (c) method described on this sitepoint article.
