Today we have a lot of different options to make grids system and complex interfaces. Flexbox and grid layouts are good examples of them. But, and before that, when we didn’t have so many options unless the magnificent
I see a lot of people complaining about
float but they usually forget it saved our life a lot of times, mainly for grid systems. For me, the main problem about
float is about the container element lose the height. And to fix that we have some alternative solutions.
One of them is to use
overflow: hidden on the container element and magically it recovers the height. But, on the other hand, if you have some specific design to do, it could be hard as we just hid everything that overflow the container.
Other alternative is the famous
clearfix solution: basically a simple technique that uses the
:after pseudoelement to clear the
float flow. Something like:
The new float solution
This is awesome! And according to docs:It always establishes a new block formatting context for its contents. The support is not so good yet, but we can test/use in some browsers already.