CSS Property: {clear:}

Specifies how box is placed after a floated box.

{clear:}

The {clear:} property specifies which sides of an element’s box (or boxes) can’t be adjacent to any floated boxes. The {clear:} property can clear an element only from floated boxes within the same block formatting context. It doesn’t clear the element from floated child boxes within the element itself.

The clearance is achieved by adding space above the top margin of the element, if necessary, until the top of the element’s border edge is below the bottom edge of any boxes floated in the specified direction or directions.

When {clear:} is specified for a run-in box, it applies to the block box to which the run-in box eventually belongs.

Internet Explorer for Windows versions up to and including 6 exhibit a bug known as the peekaboo bug, wherein a cleared element that touches the floating box(es) it clears may become invisible.

• Internet Explorer for Windows version 7:
• doesn’t clear elements with an unshared ancestor whose {height:} value is anything other than {auto;}
• doesn’t clear floated elements if the {clear:} property is specified for an element floating in the opposite direction

Internet Explorer for Windows versions up to and including 7 don’t support the value inherit.