Html 浮动元素旁边的边距顶部出现意外结果

我对这样的布局有问题：

.wrapper{
明确：两者皆有；
背景色：#ccc；
}
.wrapper+.wrapper{
边缘顶部：50px；
}
一边
梅因先生{
高度：100px；
填充：10px；
框大小：边框框；
边缘顶部：20px；
}
.盒子{
填充：10px；
}
.顶{
背景：黄色；
}
.这边{
宽度：100px；
浮动：左；
背景：浅蓝色；
}
梅因先生{
左边距：100px；
背景：浅绿色；
}

一边
主要的
顶部
一边
主要的

使用网格，您可以更优雅地执行此操作。以下是网格代码：

.wrapper {
    display: grid;
    grid-template-areas:
        "top top"
        "side main";
    grid-template-columns: 100px 1fr;
}

.top{grid-area:top}
.side{grid-area:side}
.main{grid-area:main}

请注意，我可以注释掉多少其他元素，并且仍然保持所需的布局

.wrapper{
/*明确：两者皆有*/
背景色：#ccc；
}
.wrapper+.wrapper{
边缘顶部：50px；
}
一边
梅因先生{
高度：100px；
填充：10px；
框大小：边框框；
/*边缘顶部：20px*/
}
.盒子{
填充：10px；
}
.顶{
背景：黄色；
}
.这边{
/*宽度：100px；
浮动：左*/
背景：浅蓝色；
}
梅因先生{
/*左边距：100px*/
背景：浅绿色；
}
.包装纸{
显示：网格；
网格模板区域：
“顶级”
“侧干管”；
网格模板列：100px 1fr；
}
.top{网格区域：top}
.side{网格区域：side}
.main{网格区域：main}

一边
主要的
顶部
一边
主要的

您可以将主元素设置为

内联块

，并使用calc设置宽度。这不会对布局造成太大影响，您将获得正确的输出：

.main {
  width:calc(100% - 100px);
  display:inline-block;
  background: lightgreen;
}

完整代码：

.wrapper{
背景色：#ccc；
明确：两者皆有；
}
.wrapper+.wrapper{
边缘顶部：50px；
}
一边
梅因先生{
高度：100px；
填充：10px；
框大小：边框框；
边缘顶部：20px；
}
.盒子{
填充：10px；
}
.顶{
背景：黄色；
}
.这边{
宽度：100px；
浮动：左；
背景：浅蓝色；
}
梅因先生{
宽度：计算（100%-100px）；
显示：内联块；
背景：浅绿色；
}

一边
主要的
顶部
一边
主要的

为什么不为此使用flexbox？或者，甚至内联块也会这样做job@TemaniAfif-请参阅下面我对symlink答案的回复。我很感激你的建议，我使用了flex，我很喜欢它——但不幸的是，在这里它不是一个选项。正如我在问题中提到的，我想在不改变布局的情况下解决这个问题。顺便说一句，这个问题与保证金折叠有关，其中父保证金与第一个流入子保证金折叠（在您的案例中，这是第二个保证金折叠，因为第一个保证金已流出）我有一种感觉——我只是不知道如何在布局的上下文中解决它。你想在第一个案例中打开页边空白顶部吗？你想一直看到灰色吗？谢谢，我知道

grid

，并在其他应用程序中使用过它（我很喜欢！）。然而，正如我在问题中所说，改变这里的布局是不现实的。这是一个庞大的应用程序，有许多复杂性超出了这个问题的解释范围。可以说，基本浮动/非浮动布局方法需要保留。顺便说一句-基本网格布局的演示不错：-）+1，我们希望在2020年结束所有浮动。谢谢-我确实尝试过这个方法，是的，它很有效。我试图避免这样做，因为在rea life应用程序中有大量的响应规则需要重写以适应。不过，就我所知，这似乎是最好的解决方案，需要的修改也最少是侵入性最小的修复程序，但它看起来很奇怪，我不知道它为什么能工作，因此我不愿意使用它it@billynoah因为它禁用了边距折叠。。。如果父边距和子边距之间存在任何差异，则它们不会折叠（填充、边框或其他元素）@billynoah添加了另一个想法；）可能会增加更多，因为这有很多技巧，最新的想法实际上让我笑了，但谢谢，这对我来说是一个新的