A NEW Modern Clearfix Hack With display: flow-root

Stop using the clearfix hack and replace it with a new modern value for the display property called flow-root.

The clearfix hack has been around for a long time now since about 2004,  a problem that can happen with floating elements will collapse it’s container due to its shift. But now with modern browser the solution just simpler. As show on the diagram below to correct the problem with floating elements is to use display: flow-root that wrap the floating element so they won’t collapse the div that wrap them. Underneath the diagram is the CSS code.

/* Modern Clearfix Hack With display: flow-root */
main, div, .pagewrap { display: flow-root;
}

With display: flow-root on the container element, a new block formatting context is established for the element with flow layout formatting, and this fixes our overflowing issues much more elegantly.

That should do it!