SOURCE

<!-- <div class="blue"></div>
<div class="red-outer">
  <div class="red-inner">red inner</div>
</div> -->

<!-- <style type="text/css">
    section    {
        margin-top: 13px;
        margin-bottom: 87px;
    }

    header {
        margin-top: 87px;
    }

    footer {
        margin-bottom: 13px;
    }
</style>

<section>
    <header>上边界重叠 87</header>
    <main></main>
    <footer>下边界重叠 87 不能再高了</footer>
</section> -->

<style>
​​​​​​p {
  margin: 0;
}
div {
    /* clear:both; */
  margin-top: 13px;
  margin-bottom: 0px;
}
</style>

<p>上边界范围是 87 ...</p>
<div>1</div>
<p>... 上边界范围是 87</p>

.blue, .red-inner {
  height: 50px;
  margin: 10px 0;
}

.blue {
  background: blue;
}


.red-inner {
  background: blue;
}



.red-outer {
  overflow: hidden;
  background: red;
}