It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

CSS Clear: Learn to Clear Floating Elements

Reading time 2 min
Published Sep 30, 2019
Updated Oct 3, 2019

TL;DR — CSS clear is for indicating whether HTML elements should move below the floating elements that come before it. In other words, clear specifies which sides of a floating element should not float.

Clearing floats

The CSS clear controls the behavior of the floating element by preventing the overlapping of consecutive elements over the floating element.

The value of the property clear specifies the side on which the floating element is not supposed to float. The values of clear property can be none, left, right, both, inherit, inline-start, and inline-end.

In the example, we make CSS clear floating elements on the left:

Without clear

div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the left, the text in div2 flows around div1.

 

With clear

Here, clear: left; moves div4 down below the floating div3. The value "left" clears elements floated to the left. You can also clear "right" and "both".
Example
div {
   clear: left;
}

Note: when you specify the same direction for CSS clear and float, the element moves below the floated element.

What clearfix is

When you need to make CSS clear floats, it is useful to apply CSS clearfix. For instance, when containers have only floated elements, they do not wrap around them and collapse. The CSS clearfix makes sure that the container wraps floated items by clearing children elements automatically.

Here is the syntax of CSS clearfix:

Example
#container::after { 
  content: "";
  display: block; 
  clear: both;
}

Note: the CSS clearfix works with the ::after pseudo element.