title: Why do overflow clear margin of p-tag
body: <p>I just learnt a new "css hack" from my teacher. But he don't know why it works.<br>
  I'll explain:</p>
  
  <p>I've on my website a gap (the green line) which I don't want to appear:<br>
  <a href="https://i.stack.imgur.com/hkrkY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hkrkY.png" alt="enter image description here"></a></p>
  
  <p>the grey one is the nav element, the black is a div which contains the p-tag "some content" which make this gap because of his margin. (I'll post the code at the end of the question).</p>
  
  <p>My solution would be just delete the margin. But my teacher telled me another way. He added <code>overflow: hidden;</code> to the div which contains the p, and poff, the gap is gone.</p>
  
  <p>But how is this possible? Why do overflow affect the margin of an element?</p>
  
  <p>Here's a example code plus a codepen demo:<br>
  <a href="http://codepen.io/anon/pen/JdQaYv" rel="nofollow noreferrer">http://codepen.io/anon/pen/JdQaYv</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container,
  .header,
  .content{
    margin 0;
    padding: 0;
  }
  .container{
    background; green;
  }
  .header{
    background: red;
  }
  .content{
    background: yellow;
  }
  .overflow{
    overflow: hidden;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="header"&gt;
      Header
    &lt;/div&gt;
    &lt;div class="content"&gt;
      &lt;p&gt;Contentcontent&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt; 
  ___________________________________________
  &lt;br /&gt;
  &lt;div class="container"&gt;
    &lt;div class="header"&gt;
      Header
    &lt;/div&gt;
    &lt;div class="content overflow"&gt;
      &lt;p&gt;Contentcontent&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt; </code></pre>
  </div>
  </div>
  </p>