为什么要添加溢出：隐藏会使子元素的边距起作用？

Question

[当我在h1中添加margin: 30px 0;之类的元素时，边距超出了容器！

我之前曾多次遇到此问题，并使用overflow: hidden解决了此问题>

我想找出问题所在，为什么该解决方案有效？

在这里找到一个JSFiddle https://jsfiddle.net/LeoAref/zv6c2c2d/

.container {
  background: #ccc;
}
.container.overflow {
  overflow: hidden;
}
.secTitle {
  margin: 30px 0;
}
code {
  color: blue;
}
<!-- secTitle margin goes outside the container -->
<div class="container">
  <h1 class="secTitle">Container without <code>overflow: hidden</code></h1>
</div>

<!-- works fine here -->
<div class="container overflow">
  <h1 class="secTitle">Container with <code>overflow: hidden</code></h1>
</div>

[当我添加h1之类的元素，其margin为：30px 0;时，margin超出了容器！我以前曾多次遇到此问题，并通过使用溢出解决了这个问题：隐藏的我想弄清楚是什么......

Answer 1

为什么会这样？

Answer 2

.container.overflow

Answer 3

为什么？因为边距本应位于元素之外，所以这里不考虑h1边距。默认情况下，overflow是可见的，并且在h1容器外部进行渲染。很难解释，但我尝试过！希望我能提供帮助。