From the course: Making Sense of the CSS Box Model

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Using the clearfix

Using the clearfix - CSS Tutorial

From the course: Making Sense of the CSS Box Model

Start my 1-month free trial

Using the clearfix

“

- [Instructor] We can't talk about floating and clearing without talking about the clearfix. This requires a bit of background. Let's say you have a box, and within that box, you have another two boxes, each filled with content. When all the boxes are displayed as normal, the browser understands that the size of the containing box must be at least the size of the two contained boxes combined. The problem arises when we float the contained boxes. When a box is floated, the browser is no longer able to automatically determine the height of the contained boxes. As a result, the containing box collapses down to the height of whatever non-floated content it contains. This is a point of endless strife for new web designers, and unless you know what's going on, it can be quite frustrating. So let's pick the problem apart and find a workable solution. What's happening here is that the floated boxes are taken out of the normal flow…

Contents