CSS/Properties/clear
From W3C Wiki
< CSS | Properties
Contents |
clear
The clear property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box.
Description
| Values | none | left | right | both | inherit |
|---|---|
| Initial value | none |
| Applies to | All element |
| Inherited | No |
Values
none
No constraint on the box's position with respect to floats.
left
Requires that the top border edge of the box be below the bottom outer edge of any left-floating boxes that resulted from elements earlier in the source document.
right
Requires that the top border edge of the box be below the bottom outer edge of any right-floating boxes that resulted from elements earlier in the source document.
both
Requires that the top border edge of the box be below the bottom outer edge of any right-floating and left-floating boxes that resulted from elements earlier in the source document.
inherit
Takes the same specified value as the property for the element's parent.
Example
Example A
[style.css]
p{
width: 100px;
height: 100px;
float: left;
}
p#red{
background-color: red;
}
p#blue{
background-color: blue;
}
p#green{
background-color: green;
clear: left;
}
[index.html]
<body> <p id="red">This is a paragraph</p> <p id="blue">This is a paragraph</p> <p id="green">This is a paragraph</p> </body>
CSS Reference
The CSS specification defines the clear property in 9.5.2 Controlling flow next to floats.
