The clearfix hack is a method for an element to automatically clear its child elements. Generally it’s used in float layouts where elements are floated to be stacked horizontally.
But, might it soon be a thing of the past?
Goodbye clearfix hack. Say hello to the flow-root display property.
Rachel Andrew’s blog has a great article discussing the flow-root display property which has appeared in Chrome Canary and the Firefox Nightlies.
The flow-root display property has the following definition:
“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.”
In my opinion, having a display property which will replace the clearfix hack will be helpful moving forward. Particularly when developing complex grid layouts which require stacking.
I’m looking forward to using this in my development. Let’s hope that it gets some traction and that it’s fully supported in the near future.
What are your thoughts on the upcoming flow-root display property? Share your thoughts in the comments below.