Use the CSS Clearfix Technique on Web Page Layouts


show more Clearfix technique provides you with in-depth training on Web. Taught by James Williamson as part of the CSS: Page Layouts show less
please wait ...

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 CSS th...

Clearfix technique
Video duration: 10m 38s 8h 57m Beginner

Viewers:

Clearfix technique provides you with in-depth training on Web. Taught by James Williamson as part of the CSS: Page Layouts

Subject:
Web
Software:
CSS
Author:
please wait ...