负边距底部在 FF 和 IE 中完全被忽略。这是一个错误吗？

Question

首先让我说我不需要帮助解决这个问题 - 我可以自己轻松解决我的具体问题。但我确实需要帮助来了解为什么它会发生 - 并可能确定它实际上是一个错误，所以我可以报告它。

问题是带有overflow:hidden 的父容器包含一个带有负数margin-bottom 的子容器，该子容器又包含一个或多个floated 项目，后跟clear（即它的高度取决于浮动的孩子）...似乎完全忽略了负底部边距。

我不希望子 div 的内容对负下边距发挥任何作用......无论那个孩子里面是什么，我都希望负边距得到尊重，并且内容被“切断” " 由家长的overflow: hidden.

TL;DR：下面有一个更简约的示例...

此示例显示了 FF 和 IE 中的问题 - 但与我在 chrome 中的预期完全一样：

* {
  box-sizing: border-box;
}

body {
  background: tomato;
}

.parent {
  overflow: hidden;
  background: goldenrod;
  width: 25%;
  margin: 0 12.5%;
  float: left;
}

.parent.overflow_visible {
  overflow: visible;
}

.child {
  margin-top: -10px;
  margin-bottom: -10px; /* THIS ONE has no effect in FF and IE */
}

.float {
  height: 100px;
  float: left;
  border-top: 15px solid green;
  border-bottom: 15px solid green;
  width: 100%;
}

.clear {
  clear: both;
}

.clear_below {
  clear: both;
  background: yellow;
  height: 10px;
}

<div class="parent overflow_visible">
  <div class="child">
    <div class="float"></div>
    <div class="clear"></div>
  </div>
</div>
<div class="parent">
  <div class="child">
    <div class="float"></div>
    <div class="clear"></div>
  </div>
</div>
<div class="clear_below"></div>

右边的盒子顶部和底部都应该有 5px 的边框，盒子下面的黄色条应该和左边盒子的“胖”底部边框重叠，并且正好在“瘦”底部边框的正下方对。

请注意，这大部分只是为了清楚地可视化它 - 问题本身可以通过一个不那么冗长的示例来重现：

<div style="overflow: hidden">
  <div style="margin-bottom: -10px">
    <div style="float: left">float</div>
    <div style="clear: both"></div>
  </div>
</div>

如果“孙子”没有浮动，则不会出现问题：

<div style="overflow: hidden">
  <div style="margin-bottom: -60px">
    <div><img src="http://via.placeholder.com/350x150"></div>
  </div>
</div>

任何人都可以为这种行为提供合理的解释吗？

Answer 1

这似乎是 Chrome 中的一个错误。

让我们从顶层分解您的示例。您的.parent 容器是块格式上下文根，因为它们是floating（CSS2.x 规范的section 9.4.1）。他们指定的height 是auto（默认值）。根据section 10.6.7，

...如果元素有任何浮动后代，其底部边距 边缘低于元素的底部内容边缘，则 高度为 增加以包括这些边缘

浮动后代（.float 元素）的下边距边缘是它们的下边界边缘，因为它们自己的下边距为零。该规范没有说明浮动后代的中间块包装器，因此.child 元素的高度小于.float 元素的事实不应该影响容器的高度，并且生成的容器高度应该是由浮动元素的高度（包括它们的边框）决定。这是我们在其他浏览器中看到的，如果我们从 .clear 元素中删除 clear: both; 属性，这也是我们在 Chrome 中看到的。

但是，clearing 块的存在以某种方式改变了 Chrome 中容器的行为。似乎浏览器“决定”在浮动元素下方有一些内容，并开始表现得好像高度由该内容决定，“忘记”浮动元素的底部边框实际上位于容器本身的底部内容边缘下方（位于.child 的底部边缘边缘）。

所以，如果你想裁剪块格式化上下文根的浮动后代，最好为这些浮动元素本身设置负边距。