The comparison of a clearfix hack and display: flow-root|Example|CSS Snippet|W3Docs

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        border: 1px solid #3bc9db;
        border-radius: 5px;
        background-color: #e3fafc;
        width: 400px;
        padding: 5px;
      }
      .container2::after {
        content: "";
        display: block;
        clear: both;
      }
      .container3 {
        display: flow-root;
      }
      .item {
        height: 100px;
        width: 100px;
        background-color: #1c87c9;
        border: 1px solid #eee;
        border-radius: 5px;
        float: left;
      }
      .clear {
        clear: both;
      }
      .wrapper {
        max-width: 600px;
        margin: 40px auto;
      }
    </style>
  </head>
  <body>
    <div>
      <div class="wrapper">
        <h2>Default behavior</h2>
        <p>This item is a wrapper, which contains a left-floating block.</p>
        <div class="container container1">
          <div class="item"></div>
          Example one
        </div>
        <p>
          The border on the containing block wraps only the text as the floated element is taken out of flow.
        </p>
        <p>
          The content following the box will rise up and wrap around the float unless we set it to clear.
        </p>
        <h2 class="clear">The clearfix hack</h2>
        <p>
          In this item, we use the clearfix hack to cause the wrapper to clear the floated item.
        </p>
        <div class="container container2">
          <div class="item"></div>
          Example two
        </div>
        <h2>Using display: flow-root</h2>
        <p>
          CSS now has a way to make elements clear floats. The value of the display is set to flow-root, and our floated box is cleared.
        </p>
        <div class="container container3">
          <div class="item"></div>
          Example three
        </div>
      </div>
    </div>
  </body>
</html>