Html 负边距不会拉起Firefox中浮动的同级

我有一个盒子，里面有一个标题和另外两个盒子。标题具有负页边距顶部，以便在框外渲染。在除Firefox之外的所有浏览器中，标题都会正确地拉起其同级框，但在Firefox中，这些框保持不变

如果我从盒子上取下浮子，它们会向上移动。除了给盒子加上负的保证金，还有其他的解决办法吗

div{
背景：红色；
填充：2rem；
边缘顶部：8rem；
框大小：边框框；
}
部门：之后{
显示：表格；
内容：“；
明确：两者皆有；
}
div div{
背景：绿色；
保证金：0.02勒姆；
宽度：45%；
float:left；/*删除此选项，然后在下面的float:right中使用，它在FF中工作*/
}
div div+div{
浮动：对；
}
氢{
边缘顶部：-8rem；
}

你好
这些框也在红色框的外部渲染。
在除Firefox之外的所有浏览器中。

这取决于在浏览器中如何计算块结构。我用

top

和

position

属性替换

margintop

，解决了这个问题

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;
}

工作小提琴：

---

我相信，还有其他方法可以解决这个问题

您可以将浮动框包装在非浮动容器中。 （注意：我给每个div指定了自己的类，只是为了更清楚地说明哪些样式应用于哪个div。）

.d1{背景：红色；填充：2rem；边距顶部：8rem；框大小：边框框；}
.d1:在{显示：表格；内容：''；清除：两者；}之后
.d3{浮点：左；背景：绿色；填充：2rem；框大小：边框框；宽度：45%；}
.d3+.d3{float:right；}
h2{页边距顶部：-8rem；}

你好
这些框呈现在红色框的外部。
在每个浏览器中。

首先，我进一步简化为下面的最小示例：

*{
框大小：边框框；
}
身体{
保证金：0；
}
.包装纸{
背景：红色；
填充：2rem；
边缘顶部：8rem；
}
.wrapper>div{
背景：绿色；
填充：2rem；
浮动：左；
}
.包装工：之后{
内容：''；
明确：两者皆有；
显示：表格；
}
氢{
边缘顶部：-8rem；
}

你好
这些框也在红色框的外部渲染。

我认为这可能是除Firefox之外的所有浏览器中的一个bug

• 浮动框的边距不会与任何其他边距一起折叠。
• 如果一个长方体被折叠，并且将间隙应用于其中一个折叠的边距，则这些边距不会与父级边距的某些部分一起折叠：如果间隙分别应用于顶部、右侧或左侧边距，则这些边距不会与父级边距的底部一起折叠，左边距或右边距

似乎除了Firefox之外，大多数浏览器都错误地允许浮动的div页边距崩溃。但是，通过将

clear

属性设置为

div-div

css，浮动将保留在其容器中（请参见下面的代码片段）。这种行为更符合规范的规定

这也让我相信，你在其他浏览器中看到的可能不是期望的结果。规范建议似乎表明，浮动项目应始终位于其父容器内，除非另有明确规定

浮动框的外部顶部不得高于其包含块的顶部

---

演示向浮动添加清算将使其包含在其父项中

div{
背景：红色；
填充：2rem；
边缘顶部：8rem；
框大小：边框框；
}
部门：之后{
显示：表格；
内容：“；
明确：两者皆有；
}
div div{
背景：绿色；
保证金：0.02勒姆；
宽度：45%；
浮动：左；
clear:right；//添加此选项会使浮动留在其容器中
}
div div+div{
浮动：对；
}
氢{
边缘顶部：-8rem；
}

你好
这些框也在红色框的外部渲染。
在除Firefox之外的所有浏览器中。

“这取决于浏览器中块结构的计算方式”这意味着什么P在我看来像是一个Firefox bug。我不希望像我在问题中所说的那样给每个嵌套的div加上页边距，但如果没有可用的bug修复，我可能会求助于该解决方案。另外，使用

position:relative

而不是负页边距的问题是，容器框仍然和元素向上移动之前一样高。我不想那样，谢谢你。这基本上和安迪提供的解决方案是一样的，因为他比你早一个小时，我觉得我需要给他这个荣誉。我会给你一个非常彻底的答案，也许你是对的。我不得不说，我更喜欢非Firefox的方式来处理这个问题。我不喜欢在我的代码中添加额外的div，但这显然很有效，谢谢。