html - 负边距不会拉起 Firefox 中 float 的 sibling

Question

我有一个框，其中包含一个标题和另外两个框。标题的顶部边距为负，因此它呈现在框外。在除 Firefox 之外的所有浏览器中，标题都会正确拉出其同级框，但在 Firefox 中，框会保留在原位。

如果我从盒子中移除 float ，但是它们会向上移动。除了也给盒子负边距顶部之外，有没有解决这个问题的方法？

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

您可以将 float 框包裹在非 float 容器中。(注意:我为每个 div 指定了自己的类，只是为了更清楚地说明哪些样式适用于哪个 div。)

.d1 {background:red; padding:2rem; margin-top:8rem; box-sizing:border-box;}
.d1:after {display:table; content:""; clear:both;}
.d3 {float:left; background:green; padding:2rem; box-sizing:border-box; width:45%;}
.d3 + .d3 {float:right;}
h2 {margin-top:-8rem;}

<div class="d1">
    <h2>Hello</h2>
    <div class="d2">
        <div class="d3">These boxes render outside the red one.</div>
        <div class="d3">In every browser.</div>
    </div>
</div>