MoreLesson 209Free preview

Clearfix

This lesson is part of How To · All levels

Summary

Clearfix is a technique for making a container hold onto a child's element that uses a float. Because the float removes the elements from the normal stream, the height of the container can collapse to zero. The classic solution is a pseudo-element after which clear: both is given, whereas modern solutions can use display: flow-root.

Key points

The float makes the element out of the normal groove so the parent can lose the high
Clearfix::after with content: '' and clear: both fix the thing
Display: table or block on pseudo-element helps consistency
Modern alternatives are display: flow-root or flexbox/grid

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.