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.
Just an uncleared float. Nowhere near what we want.
::after. It contains the float, but the box border is too big!
Almost what we want, but watch the boxshadow being cut off!
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 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)
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 for Android
More detailed information for
display: flow-root on caniuse.com
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: