New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

CSS: Page Layouts
Illustration by

Clearfix technique


From:

CSS: Page Layouts

with James Williamson

Video: 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.
Expand all | Collapse all
  1. 4m 20s
    1. Welcome
      54s
    2. How to use the exercise files
      3m 26s
  2. 1h 39m
    1. Box model review
      8m 47s
    2. Calculating element dimensions
      11m 11s
    3. Understanding margin collapse
      7m 59s
    4. Calculating em values
      7m 41s
    5. Calculating percentage values
      7m 51s
    6. Normal document flow
      13m 3s
    7. Controlling element display
      8m 53s
    8. Using CSS Resets
      7m 11s
    9. Fixed, fluid, and responsive layouts
      9m 9s
    10. CSS debugging tools
      6m 46s
    11. Using the Firebug Inspector and the WebKit Web Inspector
      11m 5s
  3. 53m 15s
    1. Page design workflow
      3m 6s
    2. Page design tools
      4m 56s
    3. Determining page structure
      7m 18s
    4. Creating image assets
      8m 58s
    5. Creating initial page structure
      7m 3s
    6. Adding meaning with classes and IDs
      5m 23s
    7. Structuring content with HTML5
      6m 6s
    8. Building internal structure
      10m 25s
  4. 1h 36m
    1. Floating elements
      7m 50s
    2. Clearing floats
      7m 28s
    3. Containing floats
      7m 50s
    4. Clearfix technique
      10m 38s
    5. Floating inline elements
      14m 34s
    6. Two-column floated layouts
      8m 17s
    7. Three-column floated layouts
      11m 30s
    8. Column height considerations
      7m 3s
    9. Creating equal-height columns
      10m 42s
    10. Floats: Lab
      5m 25s
    11. Floats: Solution
      5m 21s
  5. 51m 42s
    1. Relative positioning
      7m 59s
    2. Absolute positioning
      8m 59s
    3. Fixed positioning
      4m 23s
    4. Controlling stacking order
      8m 31s
    5. Clipping content
      8m 21s
    6. Controlling content overflow
      5m 38s
    7. Positioning elements: Lab
      3m 59s
    8. Positioning elements: Solution
      3m 52s
  6. 48m 46s
    1. Design considerations for fixed layouts
      3m 28s
    2. Establishing the layout grid
      7m 57s
    3. Defining column spacing
      9m 30s
    4. Applying the grid through CSS
      8m 56s
    5. Creating grid-based assets
      8m 26s
    6. Grid design resources
      6m 22s
    7. Building fixed layouts: Lab
      4m 7s
  7. 44m 35s
    1. Designing for flexible layouts
      2m 30s
    2. Calculating percentage values
      8m 45s
    3. Setting flexible width values
      6m 6s
    4. Making images flexible
      8m 10s
    5. Setting minimum and maximum widths
      7m 24s
    6. Building flexible layouts: Lab
      4m 53s
    7. Building flexible layouts: Solution
      6m 47s
  8. 49m 36s
    1. Responsive layout overview
      3m 49s
    2. Using media queries
      7m 16s
    3. Organizing styles
      8m 39s
    4. Making content responsive
      8m 33s
    5. Mobile design considerations
      7m 32s
    6. Building responsive layouts: Lab
      4m 23s
    7. Building responsive layouts: Solution
      9m 24s
  9. 1h 22m
    1. Creating multi-column text
      6m 36s
    2. Using borders to enhance design
      13m 59s
    3. Rounding corners
      6m 56s
    4. Adding drop shadows
      10m 35s
    5. Working with opacity
      6m 8s
    6. Utilizing the background property
      15m 5s
    7. Working with CSS sprites
      7m 58s
    8. Enhancing page design: Lab
      6m 22s
    9. Enhancing page design: Solution
      8m 38s
  10. 6m 25s
    1. Additional resources
      6m 25s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
CSS: Page Layouts
8h 57m Beginner Feb 07, 2012

Viewers: in countries Watching now:

CSS: Page Layouts introduces basic layout concepts, gives advice on how to create properly structured HTML based on prototypes and mockups, and goes into critical page layout skills such as floats and positioning. Author James Williamson shows how to combine these techniques to create fixed, fluid, and responsive layouts. Designers are also shown how to enhance their pages through the creative use of CSS techniques like multi-column text, opacity, and the background property. Exercise files are included with this course.

Topics include:
  • Reviewing the box model
  • Calculating em and percentage values
  • Controlling how elements display
  • Creating fixed, fluid, and responsive layouts
  • Structuring content with HTML5
  • Floating elements
  • Using relative, absolute, or fixed positioning
  • Defining column spacing
  • Creating grid-based assets and layouts
  • Considering mobile-design-specific issues
  • Working with multi-column text
  • Enhancing page design CSS Sprites
Subjects:
Web Web Design
Software:
CSS
Author:
James Williamson

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 these class styles and we would just call them like clear: left, clear: right, clear: both, whatever we want to clear, and we would apply that property to them.

And then whenever we would need clearing to apply, we would apply that class. Now, that still happens a good bit, and I usually have some of those classes in my CSS so that I can clear elements on the page when they exist. But in this instance where you've got a situation where you've got three elements floating inside of a container and nothing underneath it, what a lot of people would do is they would come in and they would do this. They would put in an element like this, like a line break, and then they would apply the class clear: left or clear: both or clear: right, just something sort of invisible, like a line break or a span tag or things like that.

So if I save this now and preview it, you can see that now it's containing the floats. The problem with that approach is that you end up putting in a lot of extra markup, markup that just really should not be there and that's not required for the page to read the way that you want it to. So it was kind of a hack, if you will. Over the course of working with this type of clearing, some very bright people came up with the clearfix method, and we're just going to go through it piece by piece so you can kind of see what this does for us. So I am going to come up here to my clear: left style that I added and I am going to modify this a little bit.

First off, I am going to change it to clearfix. Now, some people use CF, some people use clearfix, some people are using the class called group so that it has some semantic value to it. It's whatever you want to do. This takes advantage of not a relatively new CSS property but one that only over the last couple of years has been supported across the board by browsers. So this technique still has problems with older browsers, and we'll talk about how to deal with those in just a moment. But it uses something called generated content.

So after clearfix, I am going to type in a colon, and then I am going to type in after. So what this is saying is it's saying that, hey, any element that this class is applied to, I want you to generate some content directly after this. What I am going to do is inside the selector, I am going to go ahead and create some content. So I am just going to use the content property and I am going to create a blank section of content here. So the empty quotation marks that you're seeing here, that's an empty literal string. So it means create some content, but don't create anything. Put nothing there.

So it's just going to put sort of this empty literal string in there, if you will. Now, in older versions of Firefox, like versions 3.5 and below, you would need a period there, because trying to pass nothing in this generate content would cause Firefox to go a little squirrely, but since 3.5 and above, it's had no problem with that whatsoever. Now, the next thing I am going to do is change the display property to block. So this is basically saying that this empty bit of content here, this no text, go ahead and display that as a block-level element.

And then finally, I am going to come in and set clear to both. It's generating content. Now it's still inside the closing tag, just so you know where generated content goes. It's till inside the closing tag, but it's at the very bottom, and it's the last thing in the element now. So we have the sort of empty piece of white space that's displaying as block, and it's being told to clear. So now all I need to do is go down and make sure the clearfix class has been applied, and indeed it has. And if I save this and now if I test this in my browser, you can see, once again, our floats are being contained, and now we're doing it without any extraneous markup. We've got no extra markup going on whatsoever.

We're just using the generated content. It would be lovely if the story would end right here, but unfortunately, obviously this is a technique that has evolved over the years, because certain browsers have trouble with parts of this. One of the things that causes problems in Internet Explorer is the whole concept of generated content before and after. But essentially what happens is is you end up with some collapsing margins on the top of the element that you don't have towards the bottom of it. So we're going to modify this a little bit. I am going to change this by adding another group selector to this.

I am going to do clearfix:before, clearfix:after. So I am modifying the selector itself so that it's generating content at the top of the element and the bottom of the element as well. I am also going to change the display from block to table. This is a recent addition, and I am going to show you where you can read more about that. But what that does for you, instead of generating block-level content, it generates sort of empty table cell. You won't see it. It's not visible, and you won't have the collapsing margin problem, which is awesome.

Now, we don't need to clear the content at the top of the element. If we do that, it can really negatively impact our floating. So I am going to cut that out of that selector and then create a brand-new selector down here to do my clearings. So I will do clearfix:after, and we're going to do clear: both. So what this is doing is it's generating content at the top and the bottom of your element. It's generating an empty table cell, which will prevent any collapse of margins from happening, and then the one on the bottom is being cleared.

So if I save this and preview and test it, we don't notice any difference. It really works the same, but now it's much more solid, in terms of the code involved. Now, I mentioned that this method still does cause problems with certain browsers, and Internet Explorer is one of those. Now, I am going to defend Internet Explorer here because it's not so much a bug in Internet Explorer; it's how Internet Explorer deals with elements on the page that has something that we call hasLayout. If you're really serious about page layout in CSS, you need to go up to Microsoft's developer blog and read the history of hasLayout and kind of what hasLayout is and how Internet Explorer deals with it.

So what we're going to do is we're going to create another style tag. Now, this thing may seem kind of weird, but we're going to create one style tag inside of another one, and inside this one, I am going to do a little comment here that says For IE < 8 (trigger hasLayout). So essentially, what we're doing is for older versions of Internet Explorer, we need to go ahead and trigger hasLayout. Now, this needs to be a comment, so I really should have commented that out at the beginning of this. So bookend that statement with a /**/. And below that I am going to type in my clearfix selector, and I am going to do a zoom of 1, which is 100% zoom, which means don't zoom.

But just by applying zoom on the element, you trigger, in Internet Explorer, hasLayout, and it will go ahead and do your clearing for you. Now, obviously I only want Internet Explorer to apply these styles, so what I'm going to do now is I am going to wrap that sort of style tag that we've got there in a conditional comment for us that is Internet-Explorer-specific. So I am going to open up a tag and do a little comment here, !--, and then in bracket notation, I am going to type in "if lt," less than, "IE 8." Internet Explorer is the only one that's going to respond to that. And then I'll go ahead and close that, and then I am going to go down to the very bottom of this, and once again, the explanation point, and in bracket notation I am going to do endif to end that conditional comment and that ends with -->. There we go! You can just copy and paste that from the finished file if you like, if you don't want to go to the trouble of typing a lot of stuff out.

Now typically, what I would do, obviously most of your styles are going to be linked to pages, and typically I will have a link to a style sheet that is IE- specific, and these styles will just be sitting into that style sheet. I won't actually go to the trouble of doing that on every page. That doesn't seem very efficient, does it? So I am going to go ahead and save my file. And I know that seems a little complicated at first, but the beauty of this, you just write the code once in your styles, and you simply apply the clearfix class to any element that you need to contain the floats inside of it. It's very simple, and it may be slightly non-semantic in terms of the classes you are applying, but it gets the job done without a lot of extra markup, which is even better.

If you want to learn more about the clearfix syntax, its history and understanding the concepts behind it, I have a few articles that I am going to recommend you read. Now, I would start with--and I know I am going to pronounce his name wrong, so I am terribly sorry about this--Thierry Koblentz. I hope that's close. But Thierry is, he wrote a series of articles on clearfix that is just wonderful. Now, the first one is "Everything you Know about Clearfix is Wrong" and this does a great job of explaining exactly how clearfix works and how those cross-browser issues evolved, specifically Internet Explorer.

You can find this on his blog tjkdesign.com. Just search for everything you know about clearfix is wrong. He also wrote another article called "clearfix Reloaded + overflow:hidden Demystified," where he talks more on those two methods and sort of refines the syntax for clearfix, and you can find this on Yahoo!'s User Interface Blog, the yuiblog.com. Just search again for clearfix-reloaded. And then finally, I want to point out Nicolas Gallagher's really, really cool article, "A new micro clearfix hack." This goes ahead and takes what Thierry was doing and extends his work a little bit.

It reduces the amount of code and is, for the most part, the syntax that we used in our movie. So if you check out this syntax, it's going to be very similar to what we used in our file. Now, I know this syntax can be a little bit hard to remember, so for the techniques like clearfix, I typically recommend saving the code as a snippet and then just simply reusing it for each project.

There are currently no FAQs about CSS: Page Layouts.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS: Page Layouts.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.