From the course: CSS: Float-Based Page Layouts (2012)

Unlock the full course today

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

Clearfix technique

Clearfix technique - CSS Tutorial

From the course: CSS: Float-Based Page Layouts (2012)

Start my 1-month free trial

Clearfix technique

By now, you might be a little tired of hearing me talk about containing and clearing floats. However, because it is so important to page layout, I want to take a closer look at a specific clearing technique called clearfix, and how it can help make containing the floats in your layouts a little bit easier. Open up the clearfix.htm file, which you can find in 03_04 directory. And if I scroll down, I can see that I have a section with a class of clearfix applied to it, and then I have three divs: One, Two, and Three, and all three of those divs are currently right now floating to the left. So we kind of know what to expect here; we expect the section, that parent-containing element, to collapse. So I am going to preview this in my browser, and that is exactly what happens. All three of those elements are floating and so the containing element collapses. So back in the day when we first started attempting to clear the floats, one of the things that we used to do is we would put in our…

Contents