Flash cards
Review the key moves
What is the main idea behind CSS clear and Clearfix Hack?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___: left;Put the learning moves in the order that makes the concept easiest to apply.
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;
}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
.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 |