This property is used to control floating of content so it cancels the effects of one or more floated elements by not letting the element to wrap around the floated element. It has a default value of ‘none’ keyword and can take different keywords as
- none
- left
- right
- both
It is used as
.top { clear: both; }
It is illustrated with the figure as
As in the figure, the result of the using ‘clear: both;’ declaration on the ‘footer’ element is evident. The effects of the float applied to the ‘content’ element have been canceled, and the text is dropped down below.
The clear property can also cancel a float on a specific side as ‘clear: left;’ or ‘clear: right;’ to clear only left and right floated elements as shown in the figure respectively
