CSS Reference Property

clear

The clear property is directly related to floats and it is used on an element to clear the floats on either side of that element, or on both.

It is the step-sister of the float property. It indicates which sides of an element may not be adjacent to an earlier floating element.
In other words, it specifies whether an element can be positioned next to a floating element that precedes it, or should be moved down below it.

If you look in a typical magazine you’ll see images illustrating the articles, with the text flowing around them. The float property in CSS was created to allow this style of layout on web pages. Floating an image–or any other element for that matter–pushes it to one side and lets the text flow on the other side. Clearing a floated element means pushing it down, if necessary, to prevent it from appearing next to the float. — W3G Wiki

If an element has an element floating next to its right side, you can clear the right side from floats, this means that the element will be moved down so that the floating element is no longer on its side. Similarly, you can clear the element’s left side from floats, or you can clear both sides and move the element down so that no floating elements are on either of its sides.

The clear property applies to non-floated elements as well as floated elements—you can clear the floats on either side of, or around, a floating element as well.

You see, the reason why we may need clear to begin with is that if an element fits horizontally next to a floating element, it will. This is not always a desirable effect. clear is very useful as it helps avoid some layout problems or behaviors that may come up when using floats.

For example, the following demo shows an image, a paragraph of text, and a list of items. The image is floated to the left. The text, including the unordered list, will flow to the right side of the image. Because of how the demo is laid out, the unordered list is broken into two pieces. This happens because it will start to flow in the available space next to the floated image, and then continue to flow below it if there is no more space left next to the image.

View this demo on the Codrops Playground

In order to avoid the breakage of the list items, we can make sure that it is not positioned next to the floating image, by clearing its left side, thus pushing it (the entire list) down below the image. You may also clear both sides to make sure that any element floating on the right side would also be cleared, to avoid breaking at all. The following is the same demo with the list of items cleared using clear: left;

View this demo on the Codrops Playground

Note that the clear property can only clear floats belonging to the same block formatting context.

Trivia & Notes

The clear property is used to clear the floats inside a container that contains floats. This is necessary to make sure the container expands vertically to contain its floats, otherwise its height will collapse to zero. You can read more about clearing floats in the float property entry.

Official Syntax

  • Syntax:

    clear: none | left | right | both | inherit
  • Initial: none
  • Applies To: block-level elements
  • Animatable: no

Values

none
The element is not moved down to clear previous floats. It will take up any space it can occupy next to a floating element that precedes it.
left
The element is moved down to clear previous left floats. That is, it is moved below any floats floating to its left side.
right
The element is moved down to clear previous right floats. That is, it is moved below any floats floating to its right side.
both
The element is moved down to clear previous floats on both of its sides.
inherit
The element inherits its clear value from its parent.

Examples

In a typical two-column blog layout, the main section is floated to the left, the sidebar is floated to the right, and the footer is positioned below the two.

If the sidebar is shorter than the main section, there will be some white space left below the sidebar, that is to the right side of the left main section. If the footer fits inside that white space, it will, instead of being positioned at the bottom of the two columns. This is, of course, undesirable.

two-column-footer-not-cleared
Image showing the result of not clearing the footer in a two-column layout with space available next to the floated columns.

Using clear, we can make sure the footer is always pushed down below any preceding floats.

.main {
    float: left;
    /* ... */
}
aside {
    float: right;
    /* ... */
}
footer {
    clear: both;
}
                
two-column-footer-cleared
Image showing the result of clearing the footer in a two-column layout with space available next to the floated columns.

See the Live Demo section below for a full and live example.

Live Demo

Remove the clear: both declaration from the footer’s ruleset to see how it affects the position and flow of the footer with respect to the floats preceding it.

View this demo on the Codrops Playground

Browser Support

The clear property is supported in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.

Written by

Last updated February 4, 2015 at 3:02 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.