CSS/Properties/clear

From Web Education Community Group
Jump to: navigation, search

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>

Csslist2 clear.png

CSS Reference

The CSS specification defines the clear property in 9.5.2 Controlling flow next to floats.