Clear and clearfix

Learn clear and clearfix techniques.

End the float flow: clear

When an element is floated left with float: left, the block elements that follow may also sit beside it. Sometimes you do not want that; a footer, for instance, should always sit below the floated image.

The CSS clear property cuts the float flow. Its values are left, right, both, and none. clear: both is the most common: it pushes the element below both left and right floats.

Clearfix: pull the container together

When a container holds only floated children, its height collapses to zero and the children spill out. This is an old headache. The fix is the clearfix technique.

A common method: give the container a .clearfix class and add content: "", display: table, and clear: both to its ::after pseudo-element. The pseudo-element drops an invisible block at the end and pulls the height back together.

Exercise Write the clearfix pseudo-element

Write a .clearfix::after selector. Add content: "", display: table, and clear: both declarations inside it. The pseudo-element drops an invisible block at the end and pulls the container's height back together.

Show example solution

/* clearfix pseudo element */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Test yourself

What does clear: both do?
```
footer {
  clear: both;
}
```
- Pushes the footer below both left and right floats
- Floats the footer to the left
- Hides the footer
- Floats the footer to the right
Show answer

Pushes the footer below both left and right floats — Correct. clear: both pushes the element below both left and right floats.

Drop the footer below floats

footer {
  ____;
}

Show answer

footer {
  clear: both;
}

Match each clear value to its meaning

both

Clears both sides
left

Clears left floats
right

Clears right floats
none

Clears nothing

Next lesson: Summary - Modal skeleton

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies