From the course: CSS: Float-Based Page Layouts (2012)
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Clearfix technique - CSS Tutorial
From the course: CSS: Float-Based Page Layouts (2012)
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
(Locked)
Floating elements7m 50s
-
(Locked)
Clearing floats7m 28s
-
(Locked)
Containing floats7m 50s
-
(Locked)
Clearfix technique10m 38s
-
Floating inline elements14m 34s
-
(Locked)
Two-column floated layouts8m 17s
-
(Locked)
Three-column floated layouts11m 30s
-
Column height considerations7m 3s
-
(Locked)
Creating equal-height columns10m 42s
-
(Locked)
Floats: Lab5m 25s
-
Floats: Solution5m 21s
-
(Locked)
-
-
-
-
-
-