Skip to main content
CSS is fun and cool and I like it.

Clearfix: A Lesson in Web Development Evolution

The web community has, for the most part, been a spectacularly open place. As such, a lot of the best development techniques happen right out in the open, on blogs and in forums, evolving as they’re passed around and improved. I thought it might be fun (and fascinating) to actually follow this creative exchange all the way through. To take a look at a popular CSS trick, the clearfix, and find out exactly how a web design technique comes to … Read article “Clearfix: A Lesson in Web Development Evolution”


The End of the Clearfix hack?


The Clearfix: Force an Element To Self-Clear its Children

This will do you fine these days (IE 8 and up):

.group:after {
  content: "";
  display: table;
  clear: both;

Apply it to any parent element in which you need to clear the floats. For example:

<div class="group">
  <div class="is-floated"></div>
  <div class="is-floated"></div>
  <div class="is-floated"></div>

You would use this instead of clearing the float with something like <br style="clear: both;" /> at the bottom of the parent (easy to forget, not handleable right in CSS, non-semantic) or using something like … Read article “The Clearfix: Force an Element To Self-Clear its Children”


All About Floats

Float is a CSS positioning property. To understand its purpose and origin, we can look to print design. In a print layout, images may be set into the page such that text wraps around them as needed. This is commonly and appropriately called "text wrap".