margin overflow without BFC

by zoho

HTML

<!-- 
h2 有默认的 margin-top，如果 #main 的 padding-top 为 0px 的话，为保持该 margin，#main将会错位。
如果 #main 的 padding-top 大于 0px，则正常。
如果 #main 为 BFC，结果也应该正常。
-->
<div id="main">
    <h2>Some Heading</h2>
    <div id="result"></div>
</div>

CSS

html {
  background-color: #F1F1F1;
  height: 100%;
}
body {
  width: 300px;
  margin: 0 auto;
  min-height: 100%;
  padding: 0;
  background-color: white;
}
#main {
  padding: 20px;
}
h2 {
  margin: 30px;
}
#result {
  padding: 16px;
  background: #ccc;
}