Floats remain useful for their original purpose: floating an inset piece of content inside a wider textual context e.g. an illustration picture or a pull quote. And for that you might still need a clearfix-type workaround.

I really like flexbox, but its still missing functionality and somewhat misleading in its options. Everything is row-column based, but you can select between row or column, but in the column option, only justify-content will position content vertically. If you want something like forcing an element to be in the middle vertically, and have an element above it, you can't do that. align-self only works on rows. I really don't understand why they didn't make it work vertically if you have column mode.

A flexbox "column" can also be a row. You can have a container item centered vertically and also have it include two items.

In this case, I needed two children elements, one would be centered vertically in the column, and the other would be at the top of the column, but they would not effect each others position. I could only make one where the two elements were next to each other, or they effected each others positions, so the centered element was not actually centered. I ended up putting in three elements, the bottom one the same size as the top, but hidden, so the center element would stick between the two.

It's all about the nested flex'd elements.

Do you have an example that would accomplish that? As in, one element centered vertically to the parent flexbox, and its sibling attached to the top of the column, but not effecting each others position?

Yes, and further to this - genuine question - Why would you use float-based layouts over flexbox for reasons other than backwards compatibility?

About the only reason I can think of off the top of my head is that you / your team already fully grok floats, they are sufficiently powerful for your use case, and you don't want to invest the time to learn flexbox to achieve the same outcome as you could already achieve.

Susy grid system is currently float-based and the most efficient way I'm aware of to create semantic CSS layouts with wide compatibility.

http://susy.oddbird.net/

Is there any reason to not use flexboxes nowadays? I've still been using floats, inline-block, etc. so my websites are compatible with older browsers, but I would rather just switch to using all of the new CSS properties.

There are a couple of bugs with IE and older versions of the stock (deprecated) Android browser using flexbox, but I think they're all handled easily enough. Also, they don't work with IE9 - God forbid you're still supporting that browser.

Still supporting IE8, and testing components in IE7. 150k visits last month from IE7, sigh.

Like 5% of our traffic comes from IE 6-8.... Thank god for jQuery. And, I can't recall the percentage, but a surprisingly large amount from the stock Android browser (not Chrome, the one that ships on really old phones).

We have internal support for IE9. Our non-internal traffic for it is almost non-existent. We were getting a small portion of traffic from the stock Android browser as well, but we were finally able to convince them to drop support for it.

150k? That's insane. What's the location for those visits? I'm kind of intrigued.

Well, that’s out of ~90m visits a month total. This is for GOV.UK, so I suspect most of them are government internal.

Do you think Gov.uk should be supporting that 0.25% of users, seems like it's probably a waste of resources. Can't you just settle for graceful degradation? Is there some DDA angle (supporting screenreaders) or other mitigation that's not obvious?

It’s not about percentages, it’s about numbers. We don’t actually go out of our way to support it on pages and we don’t tell other departments to test in it, but if you’re building a pattern library it makes sense to do the hard work up front. In terms of graceful degradation, yep. In our current patterns project we’ve dropped all JS for IE7 beyond the HTML5shim.

Our support schedule is at https://www.gov.uk/service-manual/technology/designing-for-d...

IE8 is bad enough. IE7 sounds like torture.

In this case, flexbox actually is a bit awkward - one is often forced to pair flexbox with calc in this sort of situation. If the content, including text, is too long, it pushes the right container down a level unless the width is fixed to an appropriate size - this is doable with calc (for fluid layout) if one has control over the size of the left container, but otherwise it may be difficult to obtain the desired UI with flexbox.

You don't float anything?

The linked article uses an image floated left, with text wrapping around it. Curious to know how you'd [sanely] accomplish the same result in flexbox?

Floats aren't just for structural layout. Even with 100% browser support for Flexbox, I'll still be floating some things.

> Floats aren't just for structural layout.

In fact floats aren't for structural layout at all, they were used for it because there were no structural layout tools available at the time.

We're also on the cusp of CSS grids being available in all major browsers, and – considering people have started upgrading much faster – it should be supported for >95% of users within the next year.