Clear / Clearfix

The CSS clear Property

The clear property specifies what should happen with the element that is NEXT to a floating element.

The clear property prevents elements from wrapping around or beside the floated content.

This property can have one of the following values:

• none - Default. Allows elements to float on either side

• left - The element is pushed below floated elements on its left side

• right - The element is pushed below floated elements, on its right side

• both - The element is pushed below floated elements, on both its left and right side

• inherit - The element inherits the clear value from its parent

Example

div1 {
  float: left;
}

div2 {
  clear: left;
}

The CSS Clearfix Hack

If a floated element is taller than the containing element, it will "overflow" outside of its container. We can then add a clearfix hack to solve this problem:

Without Clearfix

<img src="/howto/clearfix_prob.jpg" style="width:100%;" class="w3-image">

With Clearfix

<img src="/howto/clearfix_solution.jpg" style="width:100%;" class="w3-image">

The clearfix hack involves the ::after pseudo-element, and is used to ensure that the parent container properly encloses its floated child elements:

Example

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Example explained:

• .clearfix::after - Targets a pseudo-element that is generated after the content of any element with class="clearfix"

• content: "" - Ensures the pseudo-element is rendered, even if it has no visible content

• clear: both - This clears both left and right floats, effectively pushing any following content below the floated elements, and forces the parent container to expand to include them

• display: table - This creates a new block formatting context, which helps in containing floats

You will learn more about the ::after pseudo-element in a later chapter.

CSS Properties