A short explanation of using Clearfix to position floats.

gistfile1.md

Clearfix

Sometimes, you will encounter situations where you will have a parent container that contains all floated elements in it, which will make the height of it collapse to literally nothing. This can create problems with older browsers or some cross browser issues can occur as well. Collapsing almost always needs to be dealt with by clearing the float after the floated elements but before the close of the container.

Ways to deal

There are a few ways to go about doing this. The first is adding an empty

after the floated elements that is not styled at all, but just used as an invisible markup clear for the floats. The problem with this, is for purists it represents semantically styling the page. While they are right in the strictest sense and is more or less frowned upon, it still gets the job done and will not hurt anything. Another way is to set the Overflow property of the parent div to :hidden, which will expand the parent div past the floats and effectively clear them. However, this too can create problems with some browsers, and if not careful, may hide other content or add unwanted scrollbars.

The most effective way to clearfix is to make use of the newer psuedo element :after. By adding this psuedo element, and applying a small amount of CSS to it:

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

This will create a small bit of content that is hidden from view, but exists on the page still in order to clear the floats.