clear (CSS property)

Spec
Inherited Initial Version
No none CSS1
Browser support (more…)
IE8+ FF1+ SA1.3+ OP9.2+ CH2+
Full Full Full Full Full

Syntax

clear: { none | left | right | both | inherit } ;

Description

This property specifies which sides of an element’s box (or boxes) can’t be adjacent to any floated boxes. This 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.

See Floating and Clearing for more information about the behavior of cleared elements.

Example

This style rule prevents all pre elements in an HTML document from being adjacent to a previously floated box:

pre {
  clear: both;
}

Value

left

The value left adds space above the element’s generated box, if necessary, to put its top border edge below the bottom edge of any left-floating boxes previously generated by elements in the same block formatting context.

right

The value right adds space above the element’s generated box, if necessary, to put its top border edge below the bottom edge of any right-floating boxes previously generated by elements in the same block formatting context.

both

The value both adds space above the element’s generated box, if necessary, to put its top border edge below the bottom edge of any floating boxes that were previously generated by elements in the same block formatting context.

none

The value none doesn’t clear any previously floated boxes.

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Buggy Buggy Buggy Full Full Full Full Full Full Full Full Full Full Full Full Full Full

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 up to and including version 7:

  • doesn’t clear floated elements if the clear property is specified for an element floating in the opposite direction
  • Will restrict the effect of the clearing to inside the parent only when that parent is in haslayout mode (other browsers exhibit the same behaviour when overflow is anything other than visible) is applied ot the parent element.
  • applies a specified margin-top value to non floated elements relative to the bottom edge of the preceding floatt until such time that the margin is greater than the height of the floated element and then the margin refers to the containing block). For example, a non floated cleared element with a margin-top value of 99px would move the cleared element 99 pixels away from the float above, assuming the float above has a height greater than the margin-top applied. If the float has a 100 pixel height and the margin-top has a value 101 pixels then the cleared element is only moved by 1 pixel.

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

Previous / Next page

  1. Previous
  2. Next

Related reference material

  • float
    specifies whether a box should float to the left or right, or not float at all

User-contributed notes

ID:
#2
Contributed:
by Paul O'B
Date:
Wed, 02 Dec 2009 15:41:59 GMT

@hjdivad : Your example shows the bug where IE6 and 7 confines the clearing of a child element to its current context when the parent is in haslayout mode. That is to say the inner element will not clear any floats outside the parent container.

This is the same effect that other browsers would exhibit had the parent been overflow other than visible.

ID:
#1
Contributed:
by hjdivad
Date:
Mon, 23 Nov 2009 20:06:09 GMT

re "doesn’t clear elements with an unshared ancestor whose height value is anything other than auto"

This problem seems to be more general. It may be that IE 7 fails to clear elements with unshared ancestors for which hasLayout=1. Consider the example below: one can break floating by specifying a width instead of height. It also works to specify 'zoom:1;'

[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<style>
#right {
float: right;
margin-top: 200px;
}
#left {
padding-right: 600px;
/* Remove to get IE7 to clear float */
width: 200px;

}
#inleft {
clear: both;
}

#right { border: solid 1px blue; }
#left { border: solid 1px red; }
#inleft { border: solid 1px green; }
</style>
</head>

<body>

<div id="right">
content-right
</div>

<div id="left">
<div id="inleft">
inleft
</div>
</div>

</body>
</html>
[/code]

Related Products