<h2>no BFC</h2>
<div class="outer">
  <p>I am paragraph one and I have a margin top and bottom of 20px;</p>
  <p>I am paragraph two and I have a margin top and bottom of 20px;</p>
</div>

<h2>With a BFC</h2>

<div class="outer overflow">
  <p>I am paragraph one and I have a margin top and bottom of 20px;</p>
  <p>I am paragraph two and I have a margin top and bottom of 20px;</p>
</div>
* { box-sizing: border-box; }

body {
  margin: 40px;
  background-color: #fff;
  color: #444;
  font: 1.4em Arial, sans-serif;
}

.outer {
 background-color: #ccc;
  margin: 0 0 40px 0;
}

p {
  padding: 0;
  margin: 20px 0 20px 0;
  background-color: rgb(233,78,119);
  color: #fff;
}

.overflow {
  overflow: auto;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.