Image showing a jellyfish in a blue sea.

The end of clearfix

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 float.

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:

.container-with-float-elements:after {
  content: '';
  display: table;
  clear: both;
}

The new float solution

.container-with-float-elements {
  display: flow-root;
}

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.

See all posts...