'float: right' evaluates as 'float: none'

Question

I have floats that are not behaving, and I have no idea why. This is what the Chrome dev tool says.

As you can see, the only float set is float: right;, so it's not a specificity issue.

I've tried setting width, changing display, explicitly setting position: static/relative:, and a few other things I can't recall.

I am at a loss on how to fix it.

Answer 1

The issue is that the parent was display:flex;. You can't float in a flex-box. Hope this helps someone in the future.