The scenario

You have 2 elements that you want side by side: what do you do? You can put both elements to display inline block, but then you get 1 character space in between the 2 elements. Sure, this can be eliminated with some css, but it's not the cleanest solution.

For a long time, the go to answer would be to put floats on each element; float-left or float-right. This however, can cause layout issues unless you clear those floats. This is achieved by adding a clear-float element or by adding an after pseudo element to all your contains that clears floats. Messy, messy messy.

The solution

Simple: CSS flexbox. Around 2 months ago, I decided that I had had enough of the float madness and I decided to ditch floats all together and switched over to flexbox. I had been wanting to do this for quite sometime, however the browser support was quite spotty. Now, since most (if not all) modern browsers support flexbox (with some vendor prefixes), the switch was super easy! With flexbox, you have COMPLETE control of how your content is displayed on the page. You can change the order that the content is displayed, vertically align items, have automatic width, and pretty much change humanity for the better, one less float at a time.

In all seriousness though, I don't think I will ever go back to using floats. Below I have included a couple of resources to help you on your new found anti-float quest.

CSS-TRICKS' flexbox guide

This guide is a great starting point and reference point for learning flexbox. It walks you through all of the flex properties and their use cases. I constantly referred to this when first experimenting with flexbox.

Flexbox Froggy

This interactive learning game is great for showcasing some of Flex’s capabilities.Whether you are a beginner, or have some experience with flexbox, this learning based game will teach you a thing or two!