Floats and "clear"

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

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.

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.

clear: both

The element is moved below all floating boxes of earlier elements in the source document.

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 - well worth reading!

Back to main menu →

Other Max Design articles and presentations
Associated with webstandardsgroup.org