display: flow-root, A nice little alternative for clearfix in CSS.

There are numerous display properties in CSS, but have you heard of flow-root??? Here are the details,

In CSS, flow-root is a value for the display property that establishes a new block formatting context (BFC) for an element. It changes how the element and its children are laid out ??

In simple words??: A new value of the display property that will enable containers to clear floats.

Let's see it in action, with some examples,

Default behavior:

The following item is a wrapper, containing a block that is floated left, which means the remaining content will occupy the right side of the container.

/* HTML */
<div class="wrapper">

    <div class="container container1">
       <div class="item"></div>
        Example one
     </div>

     <p>Lorem Ipsum has been the industry's standard dummy text ever since the   1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

</div>

/* CSS */
.wrapper {
  max-width: 600px;
  margin: 40px auto;
}

.container {
  border: 2px solid #3bc9db;
  border-radius: 5px;
  background-color: #e3fafc;
  width: 400px;
  padding: 5px;
}

.item {
  height: 100px;
  width: 100px;
  background-color: #1098ad;
  border: 1px solid #0b7285;
  border-radius: 5px;
  float: left;   
}        

The output looks like this,

Clear fix hack:

For this next item, we are using a clear fix hack to ensure that the wrapper clears the floated item.

/* HTML */
<div class="wrapper">

    <div class="container container2">
       <div class="item"></div>
        Example two
     </div>

     <p>Lorem Ipsum has been the industry's standard dummy text ever since the   1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

</div>

/* CSS */
.wrapper {
  max-width: 600px;
  margin: 40px auto;
}

.container {
  border: 2px solid #3bc9db;
  border-radius: 5px;
  background-color: #e3fafc;
  width: 400px;
  padding: 5px;
}

.item {
  height: 100px;
  width: 100px;
  background-color: #1098ad;
  border: 1px solid #0b7285;
  border-radius: 5px;
  float: left;
}

/* Clear fix hack */
.container2::after {
  content: "";
  display: block;
  clear: both;
}        

The output looks like this,

Using display: flow-root:

CSS now has a way to cause elements to clear floats. We set the value of display to flow-root and our floated box is cleared.

Now, it is a new way to clear floats by setting the display value to flow-root.

/* HTML */
<div class="wrapper">

    <div class="container container3">
       <div class="item"></div>
        Example three
     </div>

     <p>Lorem Ipsum has been the industry's standard dummy text ever since the   1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

</div>

/* CSS */
.wrapper {
  max-width: 600px;
  margin: 40px auto;
}

.container {
  border: 2px solid #3bc9db;
  border-radius: 5px;
  background-color: #e3fafc;
  width: 400px;
  padding: 5px;
}

.item {
  height: 100px;
  width: 100px;
  background-color: #1098ad;
  border: 1px solid #0b7285;
  border-radius: 5px;
  float: left;
}

.container3 {
  display: flow-root;
}        

The output looks like this,

I hope you can gain a clear understanding of why we are using the flow-root display property instead of the clearfix ??. I have attached the source code link below ?? for your reference. Please take a look, and feel free to share your comments if you know of any other newly created CSS properties.

And If you like this article please share it with your friends ????

Thanks for reading!

Happy coding!