Clearing Elements
Elements following a floated element will wrap around the floated element. If you do not want this to occur, you can apply the "clear" property to these following elements. The four options are "clear: left", "clear: right", "clear: both" or "clear: none". These screenshots and definitions along with more examples of these concepts can be found on the Max Design website - http://css.maxdesign.com.au/floatutorial/clear.htm
clear: left
The element is moved below the bottom outer edge of any left-floating boxes that resulted from elements earlier in the source document.
* Float: left element with clear: left applied to block level element below
clear: right
The element is moved below the bottom outer edge of any right-floating boxes that resulted from elements earlier in the source document.
* Float: right element with clear: right applied to block level element below
clear: both
The element is moved below all floating boxes of earlier elements in the source document.
* Float: left with clear: both applied to block level element below
The Win/IE6 Peekaboo bug
Big John, from Position is Everything, has documented a rendering bug to do with Win/IE6 and its problems clearing floats - http://www.positioniseverything.net/explorer/peekaboo.html
There are three ways we know to prevent this bug.
1. Keep the clearing div from touching the float, or avoid using a background on div#floatholder. Not exactly ideal.
2. Give both div#floatholder and div#float 'position: relative'. Be sure to fully test this method.
3. Give div#floatholder hasLayout (now the preferred method)