Happy holiday folks! All the best from us at Digitpaint
🎅

Day 3

All clear with flow-root

We've all run into this problem. You have a container which contains a float, and that float is taller than the other content inside said container. The float therefore hangs out of the box. In some cases that might be exactly what you want, but in most cases you'll use a clearfix hack to solve this problem. Soon, not anymore though! The display: flow-root property lets us fix that without hacking.

Why is flow-root better?

It's best to show this in a demo. We'll show the problem, the result of the clearfix hack and the new flow-root way of life. Flow-root only works on Chrome and Firefox at the moment.

Float
Float

Default

Just an uncleared float. Nowhere near what we want.

Float
Float

Clearfix hack

Using ::after. It contains the float, but the box border is too big!

Float
Float

Overflow: hidden

Almost what we want, but watch the boxshadow being cut off!

Float
Float

Display: Flow-root

This seems to do the trick!

Issues with traditional methods

As you can see, all traditional "solutions" (or hacks) have problems. The clearfix is nice if you just need containing boxes, but if you need floats next to each other, or even bulleted lists next to floats, it will fail you.

overflow: hidden (or oveflow: auto) seems to be a good contender, but it is problematic in itself. You might not be able to apply it as it needs content to be visible instead of hidden/scrollable. And it doesn't play well with things like box-shadows, as you can see in the demo above.

Display: flow-root

display: flow-root seems to do exactly what we want. It contains the inner float, it floats correctly next to the adjacent float and does not cut off the box-shadow.

Technically, according the the spec it does the following:

The element generates a block container box, and lays out its contents using flow layout. It always establishes a new block formatting context for its contents.

The generation of this block formatting context has some other side effects than "just" clearing floats. It also:

  • prevents margins from collapsing
  • keeps the entirety of the block "together" (that's why the border starts next to the float as opposed to before the float)

Compatible with

As we write this (december 2017), display: flow-root only works in Chrome / Chrome for Android and Firefox. There are bug-reports for Edge and Webkit but there isn't really a lot of response from Apple or Microsoft.

  • Chrome
  • FireFox
  • Chrome for Android

More detailed information for display: flow-root on caniuse.com

Learn more

We've just covered the basics here but there is a lot more info out there:

Demo source code

Do you want to see what makes these demos possible? Have a look at their source code:

Back to home