html - 为什么会溢出 p-tag 的 clear margin

Question

我刚刚从我的老师那里学到了一个新的“css hack”。但他不知道为什么会这样。
我会解释:

我不想在我的网站上出现一个空白(绿线):

灰色的是 nav 元素，黑色的是一个 div，其中包含 p 标签“一些内容”，由于他的边距而造成了这个空白。 (我将在问题末尾发布代码)。

我的解决方案是删除边距。但是我的老师告诉我另一种方式。他将 overflow: hidden; 添加到包含 p 的 div 和 poff，间隙消失了。

但这怎么可能呢？为什么溢出会影响元素的边距？

这是一个示例代码和一个代码笔演示:
http://codepen.io/anon/pen/JdQaYv

.container,
.header,
.content{
  margin 0;
  padding: 0;
}
.container{
  background; green;
}
.header{
  background: red;
}
.content{
  background: yellow;
}
.overflow{
  overflow: hidden;
}

<div class="container">
  <div class="header">
    Header
  </div>
  <div class="content">
    <p>Contentcontent</p>
  </div>
</div> 
___________________________________________
<br />
<div class="container">
  <div class="header">
    Header
  </div>
  <div class="content overflow">
    <p>Contentcontent</p>
  </div>
</div> 

Answer 1

浏览器总是用附近的边距折叠边距。当您提供 overflow: hidden 时，它会计算其盒模型内的所有内容，并使其限制在内容范围内。

对 BoltClock 和其他任何人的解释。 抱歉我的笔迹太脏了...

这也是 float 的情况。 float 元素不占用任何空间。看看这里:

div {padding: 5px; border: 1px solid #666;}

<div>
  <div style="float: left;"></div>
</div>

但是同样的事情，如果父级有一个overflow: hidden，它就不会发生:

div {padding: 5px; border: 1px solid #666;}

<div style="overflow: hidden;">
  <div style="float: left;"></div>
</div>

这里有一整篇关于这个概念的大文章:What You Should Know About Collapsing Margins . overflow 是一个非常强大的属性，它适用于所有情况。但是当涉及到position时，你需要小心使用它!

position 的工作方式类似于float，两者都不采用布局。例如，请参阅以下代码段:

div {padding: 5px; border: 1px solid #666;}

<div>
  <div style="position: absolute;"></div>
</div>

哪里，如果你玩错了:

div {padding: 5px; border: 1px solid #666;}

<div style="overflow: hidden; position: relative;">
  <div style="position: absolute;"></div>
</div>

上面的内容被删减了。希望清楚。