the Web, seen from in front

About Using CSS Floats for Primary Layout: Stop It Already

The piece of my CSSConf Asia talk that generated the most heat in the Twittersphere was the following claim:

Floats were invented for one reason and one reason alone: to allow text to wrap around an image. They were not intended to do what we do with them. I know this hurts to hear it: but Floats are the table-based layout of our time. Unless you have to support IE6, stop using them, except in very specific, very limited situations.

So, let’s just add some quick clarity to that, as conference talks need to be more concise than is ideal: floats are cool for tactical uses, and are downright invaluable if you’re supporting old IE and can’t use display:inline-block as yet, let alone Flexbox. Even with inline-block available to you, there are still places where floats are super-handy, like kicking a single element in a toolbar off to the right, or when you really do want to wrap your inline text around an image.

What I’m talking about is the use of floats as a primary layout tool: for creating and aligning columns and the large blocks within those columns. This is what confuses people. This is what makes newcomers to CSS hurl epithets, and causes us to need additional elements just so that we can clearfix our floated elements. It causes elements to appear out of their semantic order. It causes things to align in all kinds of unexpected ways. (See my slides for some examples of these, and then also just use the google a little.) Most significantly, the mastery of CSS layout is principally about mastering your use of normal page flow, so you can obtain the most flexible, most responsive, most understandable layout possible, with a minimum of code. The principal sin of a float is that it removes the floated element from the normal flow, making this kind of thinking nearly impossible.

If you’re new to CSS layouts, you’d be forgiven for thinking that using CSS floats in imaginative ways is the height of skill. If you have consumed as many CSS layout tutorials as you can find, you might suppose that mastering floats is a rite of passage. You’ll be dazzled by the ingenuity, astounded by the complexity, and you’ll gain a sense of achievement when you finally understand how floats work.

Back in the day, floats got us out of a lot of important jams. Particularly in the early CSS era, where we had bigger fish to fry (ahem: table-based layout), floats got us out of a lot of trouble and made Good Things possible. I’m grateful we had them when we needed them.

But time passes, and we evolve to use better techniques. We were extremely grateful for the steam locomotive when all we had was horses. Now we’re grateful for the Prius, and getting ready to move away from internal combustion entirely. So it is with floats, inline-block, and Flexbox.

The problem with floats isn’t that they don’t work. It isn’t that you’re a bad person for taking advantage of them to get your work done, especially if you’re writing for the consumer and still supporting old IE. The problem is that they don’t behave in an intuitive and maintainable way. They force us to do extra, unnecessary work. They make people angry, and diminish people’s respect for the craft of UI Engineering.

The concept of floats is probably one of the most unintuitive concepts in CSS.

Hence my claim (and that of many, many other folks – see below): the time for using floats as a strategic CSS layout tool… is over. Float-based columns are dead. Long live the Flexbox and its prince regent, Inline-Block.