A new value of the display property has landed in Chrome Canary and Firefox Nightlies. In the Editor’s Draft of the CSS Display Module Level 3, display: flow-root is defined as:
“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 key use of this comes when you have a box with a floated element inside it, and the floated element is taller than the other content inside the box. Default behaviour is that the box will not clear the float, and anything that comes afterwards will also wrap the floated item.
The floated element is out of flow causing the box to collapse.
The typical way we have solved this issue is to use a clearfix hack. The hack inserts some generated content, sets it to display; table or display: block and then clears it. This then ensures that the box becomes self-clearing, in our example the border will display after the floated item, and any following content will not rise up to wrap the float.
Enter display: flow-root
Using display: flow-root on an element will perform this clearing for us. Instead of needing to apply the clearfix hack we can use the CSS display property on the container with a value of flow-root.
.container {
display: flow-root;
}The border then clears the float and following content displays after our contained floated element.
After setting display: flow-root on the container
You can see a set of demos on CodePen. You will need to use Chrome Canary or Firefox Nightly to see this working today!
See the Pen display: flow-root by rachelandrew (@rachelandrew) on CodePen.
There is some discussion about the name of the value on an issue posted to the CSS Working Group GitHub. If you want to see interoperable support for this feature soon, then I’d suggest you pop over to the Edge UserVoice site and give it a vote.
Comments
I think “flow-root” is the new “clear: both”. So simple
This is excellent, and I can’t wait to for this to percolate through the browser ecosystem. I’ve been reliant on doing stuff like overflow: auto; on a parent element containing floating children or using inline-block elements. This will be a much cleaner way to resolve the problem.
This is a hack to mimic “display:flow-root”: http://codepen.io/thierry/pen/BpdBPy
PS: don’t do this at home
`display: flow-root` is in someway harmful (requires to add extra Element) till spec supports multiple values for “display” like `display: flex flow-root` (I haven’t jet proposed it to W3C) …
Otherwise, to cover cross-browser compatibility, can use:
```
.clearfix:after { content: “”; display: block; clear: both;
}
@supports (display: flow-root) { .clearfix { display: flow-root; } .clearfix:after { display: none; }
}
```
Example http://codepen.io/laukstein/pen/WRENPz