This content originally appeared on this is rachelandrew.co.uk and was authored by this is rachelandrew.co.uk
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.
This content originally appeared on this is rachelandrew.co.uk and was authored by this is rachelandrew.co.uk
this is rachelandrew.co.uk | Sciencx (2017-01-24T10:41:00+00:00) The end of the clearfix hack?. Retrieved from https://www.scien.cx/2017/01/24/the-end-of-the-clearfix-hack/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.