Question

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

问题是包含overflow:hidden个孩子的margin-bottom父容器，其中包含一个或多个float ed项，后跟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容器是块格式化上下文根，因为它们是float（CSS {1}}规范的section 9.4.1。他们指定的height是auto（默认值）。根据{{3}}，

...如果元素有任何浮动后代的底部边距 edge位于元素底部内容边缘下方，然后高度为增加以包括那些边

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

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

因此，如果要剪切块格式化上下文根的浮动后代，最好将负边距设置为这些浮动元素本身。

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

1 个答案: