May 5, 2012

Clearing CSS Floats – Clearfix

Every web designer / developer has a preferred method for clearing their floats. I’m partial to simply tacking on a class of “clearfix” to a parent element which has floated children. Below is the CSS code for this “clearfix” method. If you are unable to copy and paste the code below, here is a link to a plain text file with the same code.

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

About the Author

Brad Schiff

Brad Schiff is a front-end developer, designer, and educator who has been building user interfaces for over a decade. He’s done work for Fortune 500 companies, national political campaigns, and international technology leaders. His proudest achievement is helping people learn front-end web development.

Follow Brad on Twitter Subscribe on YouTube

6 thoughts on “Clearing CSS Floats – Clearfix

  1. Thank you for these tips. I’m slowly understanding how to put all of this together!
    Qeustion (and sorry if this isn’t the best location for this question). Is the following correct or not?

    A CLASS is something that can effect more than one element on a page wheereas an ID can only effect one element on the page.
    And a CLASS has to be preceded by a period (.class) whereas an ID is preceded by a hastag (#id).
    But containers refer a in an thml doc. And a container is also preceded by a hashtag.
    But containers are not selectors where as CLASS and ID are.
    So a container, even though it is preceded by a hashtag, is only a grouping of CLASS and or ID selectors in a specific region in an html file?
    And a CLASS and or ID can live inside or outside a container?

    Thanks,
    Jeremy

    1. Hi Jeremy,

      Yes, a CLASS can be assigned to multiple elements on a page.
      An ID should only be assigned to a single element on the page.

      You are also correct that a CLASS is preceded by a period (.class) and an ID is preceded by the pound sign (#id).

      However, I’m not sure what you are referring to when you mention “containers.” Are you referring to a div with a class or and ID of “container.” That is just a convention designers commonly use to position and/or center a large chunk of content.

      In your HTML code you can nest a div inside of a div. You can also nest an unordered list inside an unordered list. There are plenty of examples of elements that can be nested. You can then use descendent selectors in your CSS to target specific elements. For example if we had a div with a class of “navigation” and it had two levels of links (parent and children) we could write a selector like the following to target and style the children links:

      .nav ul li ul li a

      I hope this answers some of your questions. If not, just let me know.

      Thanks!
      Brad

  2. Hi,
    Your tutorials are very easy to understand. I have learned CSS Lesson 4,5 and 6. But this lesson (Clearing CSS Floats – Clearfix) confused me. I have not understand:

    ” content: “.”; display: block; clear: both; visibility: hidden; ”

    Can you teach me about these elements?

    1. The code that you included is used to add a period (.) to the end of the element, and then set it to “clear” any floated siblings above it, and finally set it to visibility hidden so the period is invisible. The idea behind the clearfix method is to make sections of content “self sufficient” so they aren’t reliant on an element below them to clear their floats.

      An alternative to the clearfix method is to simply make sure there is a sibling after the floated elements and that it has the property “clear: both;”

      I’ve created a video tutorial on this topic:
      http://learnwebcode.com/understanding-css-floats/

      Thanks!
      Brad

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>