Question

我有一个包含标题和另外两个框的框。标题具有负边距顶部，以便它在框外呈现。在除Firefox之外的每个浏览器中，标题都正确地拉出了它的兄弟盒子，但是在Firefox中，盒子保持不变。

如果我从盒子中取出浮子，但他们做向上移动。除了给盒子提供负边缘顶部之外，还有其他方法吗？

div {
  background: red;
  padding: 2rem;
  margin-top: 8rem;
  box-sizing: border-box;
}

div:after {
  display: table;
  content: "";
  clear: both;
}

div div {
  background: green;
  margin: 0 0 2rem;
  width: 45%;
  float: left; /* Remove this and float: right below and it works in FF */
}

div div + div {
  float: right;
}

h2 {
  margin-top: -8rem;
}

<div>
<h2>
Hello
</h2>
<div>
These boxes also render outside the red one.
</div>
<div>
In every browser except Firefox.
</div>
</div>

Answer 1

我认为除了Firefox之外，这可能是每个浏览器中的错误。

The Working Draft Collapsing Margin Spec states:

浮动框的边距不会因任何其他边距而崩溃。

如果框已折叠并且已应用间隙到其中一个折叠边距，那么这些边距不会崩溃与某些父级边距：如果清除分别应用于上边距，右边距或左边距，然后这些边距不会与父母的左下边距，左边距或右边距分别折叠。

除了Firefox之外，大多数浏览器似乎都错误地允许浮动的div边距崩溃。但是，通过将1.2+属性设置为clear css将导致浮动保留在其容器中（请参阅下面的代码段）。这种行为更符合规范。

The Recommendation for positioning of floats也让我相信您在其他浏览器中看到的内容可能不是理想的结果。 Spec建议似乎表明浮动项应始终位于其父容器中，除非另有说明。

浮动框的外顶部可能不高于其包含块的顶部。

演示以显示向浮动添加清除将使其包含在其父中

div div

div {
  background: red;
  padding: 2rem;
  margin-top: 8rem;
  box-sizing: border-box;
}

div:after {
  display: table;
  content: "";
  clear: both;
}

div div {
  background: green;
  margin: 0 0 2rem;
  width: 45%;
  float: left;
  clear:right; // Adding this causes the floats to stay in their container
}

div div + div {
  float: right;
}

h2 {
  margin-top: -8rem;
}

Answer 2

这取决于在浏览器中如何计算块结构。我通过将margin-top替换为top和position属性

来解决这个问题

div {
  background: red;
  padding: 2rem;
  margin-top: 8rem;
  box-sizing: border-box;
}

div:after {
  display: table;
  content: "";
  clear: both;
}

div div {
  position: relative;
  top: -12rem;
  background: green;
  width: 45%;
  float: left;
  /* Remove this and float: right below and it works in FF */
}

div div + div {
  float: right;
}

h2 {
  margin-top: -8rem;
  position: absolute;
}

工作小提琴：https://jsfiddle.net/nobalmohan/6sjhy1q3/

我相信，还有其他方法可以解决它。

负余量不会拉动Firefox中浮动的兄弟姐妹

2 个答案: