Float is one of the most ubiquitous CSS properties that new students learn. As soon as the concept of using CSS for layout is introduced float becomes the standard option and is frequently one of the first taught. It has become so entrenched in web design as a tool for layout, that any curriculum that omits it would seem highly incomplete. So it may surprise you that I’ve stopped using float in my own designs and started cautioning my students to do the same. Why? I’m glad you asked!
Would it interest you to know that float was never intended to be used for layout? At least, it was never intended to be used in the way it has been used most commonly. Float was originally included into the HTML specification as a way to mimic a common layout trick in the print industry. If you’ve ever looked at a newspaper or magazine, you’ve seen an image appearing in the body of an article with the text flowing down and around it. Float was introduced to allow designers to create similar layouts for webpages. At the time float was introduced, there were not a lot of options for creating columnar layouts that did not involved using tables. As we all know, using tables for layout is like wearing white after Labor Day in my homestate of Alabama. So in order to avoid being publicly shamed by southern Gramma’s everywhere, but still achieve two or three column layouts, designers began to float larger elements. After all, you can float pretty much anything.
The problem, we quickly realized, was that using float on an element pulls that element out of the normal flow of the document. If you have a several floated elements inside of a container element, that container element is effectively empty. When an element has no content, it’s height is automatically set to zero. This results in some truly baffling layouts such as:
Not to fret, there’s a fix for it! It’s called clearfix and it uses the :after psuedo-selector to force the content in the floated elements to render below the floated elements thus… blah blah blah. Bottom line, it’s super confusing and it’s no longer necessary. The problem with the clearfix solution isn’t that it’s much extra code. The problem is that it’s not at all clear what it’s doing, why it works, or where to apply it. This means that you can spend a lot of time randomly applying a clearfix until your layout suddenly just works and you’re left feeling like CSS is impenetrable magic. Now for the good news, there’s a much easier method, and it’s been around for several years now. If you simply apply a display property of inline-block to any elements you want to sit next to each other in a layout, you get the same effect without the hassle of having collapsing containers. Observe! JS Bin on jsbin.com
Full disclosure, this is not remotely the first blog to caution against using float. But float is like glitter – you can never really get rid of it. There are still lots of projects that use it and lots of web developers who insist on using it.