CSS clear Property
The clear property defines how an element relates to previous floated content.
Possible Values
- left - the element should be 'clear' of previous left-floated content.
- right - the element should be 'clear' of any previous right-floated content.
- both - the element should be 'clear' of both left and right-floated content.
- none - there are no constraints on the position of the box in relation to floats.
- inherit - the value is inherited from the parent element.
Code Example
div{clear: left;}
With the clear property you can ensure that an element will be displayed below any floated content from earlier in the web page.
In the example below an image has been floated to the right of a paragraph of text so the text flows down the left-hand side of the image:
As you can see the text flows along the left hand side of the floated image and the line length is adjusted accordingly by the browser. As you can see the text flows along the left hand side of the floated image and the line length is adjusted accordingly by the browser. As you can see the text flows along the left hand side of the floated image and the line length is adjusted accordingly by the browser.
In this example you can see the effect of using {clear: right;} on the paragraph which is then moved below
the float.
In this example with the clear property set to right the paragraph is moved below the float.