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
Formatted code
div1 {
float: left;
}
div2 {
clear: left;
}Live preview
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:
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
Formatted code
.clearfix::after {
content: "";
clear: both;
display: table;
}Live preview
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 |