clear (CSS property)
| IE5.5+ | FF1+ | Saf1.3+ | Op9.2+ |
|---|---|---|---|
| Buggy | Full | Full | Full |
| Inherited | Initial | Version |
|---|---|---|
| No | none |
CSS1 |
Example
This style rule prevents all
pre elements in an HTML document from being adjacent to
a previously floated box:
pre {
clear: both;
}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.
Value
leftThe value
leftadds 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.rightThe value
rightadds 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.bothThe value
bothadds 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.noneThe value
nonedoesn’t clear any previously floated boxes.
Compatibility
| IE | 5.5 | Buggy |
|---|---|---|
| 6.0 | Buggy | |
| 7.0 | Buggy | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Full |
| 9.5 | 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 version 7:
- doesn’t clear elements with an unshared ancestor whose
heightvalue is anything other thanauto - doesn’t clear floated elements if the
clearproperty 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.
Related Reading
User-contributed notes
There are no comments yet.
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.
