CSS clear and clearfix Hack
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 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 |
