CodePen Embed - block formatting context

<div class="outter">
  <div class="item"></div>
  <div class="item"></div>
</div>

<div class="outter bfc">
  <div class="item"></div>
  <div class="item"></div>
</div>

html{
  background:#333;
  padding:15px;
}
.outter{
  background:#d1c4e9;
}
.item{
  height:30px;
  background-color:#673ab7;
  margin:15px 0;
}
.bfc{
  overflow:hidden
}

Run Pen

This Pen is owned by Gau Liang on CodePen.

See more by @gauliang-the-encoder on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.