Today we have a lot of different options to make grids systems 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. float?
I see a lot of people complaining about float But they usually forget that it saved our life a lot of times, mainly for grid systems. For me, the main problem is that the container element loses 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. On the other hand, if you have some specific design to do, it could be hard because it will just hide everything that overflows the container.
Another alternative is a simple technique that uses the pseudoelement to clear the 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 it in some browsers already.