什么是带clearance的top margin？请求结合示例解释WC3规范相关条款

Clearance是CSS中用于抵消浮动元素影响的特殊空间。当一个元素设置了clear: left/right/both，且它的顶部与前面的浮动元素垂直重叠时，浏览器会在该元素的top margin上方插入一块不可见的区域（clearance），此时这个元素的top margin就被称为带clearance的top margin。这种margin不会和相邻元素的margin发生折叠——clearance会直接阻断margin折叠的逻辑。

原条款内容：子元素的bottom margin既不与带clearance的top margin发生折叠，也不（若盒子的min-height非零）与该盒子的top margin发生折叠。

这是height为auto的正常流块级父元素，其bottom margin能与最后一个正常流块级子元素的bottom margin折叠的必要前提之一，拆解为两点：

1. 子元素的bottom margin不能和任何带clearance的top margin产生折叠。也就是说，如果子元素因为自身或前置元素的clear属性触发了clearance，导致它的margin折叠逻辑被阻断，那么父元素和子元素的bottom margin就无法折叠。
2. 若父元素设置了非零的min-height，则子元素的bottom margin不能与父元素的top margin发生折叠。如果子元素同时和父元素的top、bottom margin都折叠（相当于子元素的margin“穿透”了父元素），那么父元素的bottom margin就不会再和子元素的bottom margin折叠。

示例1：子元素带clearance的top margin，父子bottom margin不折叠 #

<style>
  .float-element {
    float: left;
    width: 100px;
    height: 100px;
    background: #ccc;
  }
  .parent-box {
    background: #eee;
    /* 无底部内边距和边框 */
  }
  .child-box {
    clear: both; /* 触发clearance */
    margin: 20px 0;
    height: 50px;
    background: #f00;
  }
</style>
<div class="float-element"></div>
<div class="parent-box">
  <div class="child-box"></div>
</div>

子元素child-box设置了clear: both，它的top margin被clearance阻断，无法和浮动元素的margin折叠。此时子元素的bottom margin属于“与带clearance的top margin关联”的情况，因此父元素parent-box的bottom margin不会和子元素的bottom margin折叠——子元素的20px底部margin会直接作用在父元素外部下方，而非与父元素的margin合并。

示例2：父元素min-height非零，子元素与父元素top margin折叠，父子bottom margin不折叠 #

<style>
  .parent-box {
    background: #eee;
    min-height: 1px; /* 非零最小高度 */
    margin: 20px 0;
    /* 无底部内边距和边框 */
  }
  .child-box {
    margin: 30px 0;
    height: 50px;
    background: #f00;
  }
</style>
<div class="parent-box">
  <div class="child-box"></div>
</div>

父元素设置了min-height: 1px，子元素的top margin会和父元素的top margin折叠（最终父元素上方的margin为30px，取两者最大值）。此时子元素的bottom margin已经和父元素的top margin发生折叠，不符合条款要求，因此父元素的bottom margin不会和子元素的bottom margin折叠——父元素下方的margin保持为自身的20px，而非子元素的30px。

示例3：符合所有条件，父子bottom margin正常折叠 #

<style>
  .parent-box {
    background: #eee;
    margin: 20px 0;
    /* 无底部内边距、边框，height:auto，min-height默认0 */
  }
  .child-box {
    margin: 30px 0;
    height: 50px;
    background: #f00;
  }
</style>
<div class="parent-box">
  <div class="child-box"></div>
</div>

这里父元素满足height:auto、无底部内边距/边框的条件，子元素的bottom margin既没有和带clearance的top margin折叠，父元素min-height为0也不存在子元素与父元素top margin折叠的情况。因此父元素的bottom margin会和子元素的bottom margin折叠——最终父元素下方的margin为30px（取两者最大值）。

内容的提问来源于stack exchange，提问作者Zytonox