CSS Layout - Clear And Clearfix - W3Schools

CSS clear and clearfix Hack ❮ Previous Next ❯

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

Here, clear: left; pushes div2 down below the floating div1, on its left side:

div1 { float: left;}div2 { clear: left;} Try it Yourself »

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

With Clearfix

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;} Try it Yourself »

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

Property	Description
clear	Specifies what should happen with the element that is next to a floating element
float	Specifies whether an element should float to the left, right, or not at all

❮ Previous Next ❯ ★ +1 Sign in to track progress