OQwebdesign logo
  • Home
  • About
  • Tech Blog

A NEW Modern Clearfix Hack With display: flow-root

July 15, 2022 Modern Clearfix Hack display: flow-root
Share
Tweet
Share
0 Shares

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!

Popular Tech Posts

  • Easy way to setup a local HTTP Server on macOS
  • A NEW Modern Clearfix Hack With display: flow-root
  • Install Brotli in Apache on Debian 11
  • Use Let’s Encrypt certificates with Cockpit

Tag Cloud

Apache Web Server CSS Debian Install Brotli Laravel Nginx PHP Ubuntu Wordpress
white OQWebdesign logo

© Copyright 2007-2023 OQwebdesign. All rights reserved.

  • Home
  • About
  • Tech Blog