Are floats in CSS dead or deprecated?

The other day I was discussing the 'bad old days' of web development, and the topic of float layouts came up (if you don't know what I'm talking about, I envy you!), now that flexbox and grid layouts are completely(*) supported. Should we still use float? Is it dead? Is it deprecated?

(*) As far as we care anyway.

Is CSS float deprecated?

In a word: no.

The float property still exists in CSS as it did when Internet Explorer was a young browser, and still works the same.

But I would advise you to avoid it entirely for layout purposes. The only use I have for floats these days (and the only use you should have, hopefully) is to wrap text around images in a document.

In a few more words

Once, long ago, there were no grid/row/column/anything-side-by-side based layouts on the web. None(*).

(*) Not entirely true.

Then, some bright spark decided to start using tables to lay content out (I'm deliberately not talking about multiple-frame-layouts). Which worked, but for reasons (slow to render, more HTML to mark up, bad for a11y, not responsive, etc) was discouraged.

Then, someone realised we could use floats (the property designed for wrapping text around images) to move things around. Suddenly, we web developers had power!

When the designer said "I want these two columns next to each other, but not on small screens", we said "I can do that!". And then when the designer said "I want the content in the columns to be vertically centered", we said "Oh darn, we cannot do that". (A true story, featuring me).

And for a while, this was great. But then, we started to get a bit tired of all the shortcomings of floats (they're a massive pain, you can't really vertically center things, they're a pain, did I mention they're a pain?), so we started whining "can we please have a better way to do this?"

And in response, the web gods offered up flexbox. Except we couldn't use it for what felt like an eternity, because of browser support.

But then, one day, we went "you know what? Screw Internet Explorer and Safari, I'm using flexbox".

And we never looked back. Until now, of course.

What I'm trying to say about CSS float is...

What I'm really trying to say is this; The CSS float property was designed to serve a purpose (wrapping text and block level elements), we hacked it to do something else for a while, then we got the tools to do what we wanted, and now we can go back to (very infrequently) using float to do what it was intended for.