title: What is the difference between using display: flow-root and overflow: hidden to contain floats?
body: <p>A new <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display?v=control" rel="noreferrer"><code>display</code></a> value <code>flow-root</code> has been added to the <a href="/questions/tagged/css" class="post-tag" title="show questions tagged &#39;css&#39;" rel="tag">css</a> spec:</p>
  
  <blockquote>
    <p>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. [CSS2] – <a href="https://drafts.csswg.org/css-display/#valdef-display-flow-root" rel="noreferrer">https://drafts.csswg.org/css-display/#valdef-display-flow-root</a></p>
  </blockquote>
  
  <p>There are <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context" rel="noreferrer">many ways to create a block context</a>, e.g. <code>overflow: hidden</code>.</p>
  
  <p>What is different about using <code>display: flow-root</code> vs <code>overflow: hidden</code> to contain float-ed elements?</p>