<h2>Using a Block Formatting Context to Clear Floats</h2>

<div class="container">
  <div>Sibling</div>
  <div>Sibling</div>
</div>

<button>TOGGLE BLOCK FORMATTING CONTEXT</button>

<p class="p">Demo by Ritesh Kumar. <a href="http://www.sitepoint.com/understanding-block-formatting-contexts-in-css" target="_blank">See article</a>.</p>

/** For block without BFC **/
.container {
  background-color: green;
}

.oh {
  overflow: hidden;
}

.container div {
  background-color: lightgreen;
  float: left;
  margin: 10px;
}

/* general styling */

body {
  text-align: center;
  width: 500px;
  margin: 0 auto;
}

.container div,
.container2 div {
  width: calc(50% - 20px);
}

button {
  margin-top: 30px;
}

.p {
  background: none;
  padding-top: 150px;
  font-size: 13px;
}
/* general styling ends */

var btn = document.querySelector('button'),
    c = document.querySelector('.container');
btn.addEventListener('click', function () {
  c.classList.toggle('oh');
}, false);