Html 浮动和非浮动div之间缺少边距

我发现，当我混合浮动和非浮动div时，未浮动div的保证金丢失了

HTML

看这把小提琴（中间部分缺少5px的边距）

然而，如果我给浮动元素添加边距，那么它就真的存在了。 有人知道为什么会这样吗

编辑我更新了小提琴，有点混乱

---

要了解问题，请查看中间和左侧分区之间或中间和右侧之间的边距。没有。

您遇到的问题是，非浮动元素将忽略文档流中的浮动元素。 正在应用边距，但由于非浮动div无法识别浮动div，因此其相对于页面边缘，而不是浮动div。

---

您可以在此处阅读更多信息：

我不知道您在问什么。当我尝试它时，边距工作正常。我更新了小提琴，它令人困惑。我已经将中间div的边距增加到

50px

，只是为了表明边距确实被应用：看看应该在中间和左边div或中间和右边之间的边距。没有边距。它说：“重要的是要么把所有元素都放在一个容器中，要么一个都不放。”。当左定宽div、右定宽div和中心div必须占用剩余的宽度时，如何解决这个问题呢？在浮动元素上设置动态宽度是很粗糙的。这可能不是理想的解决方案，但您可以让代码保持原样，并将中心div上的边距设置为等于浮动div的宽度+它们之间所需距离的大小。在这个例子中，边距是这样的：边距：0 105px@OzrenTkalčecKrznarić使用

显示：表格单元格

，或者我想象的冗余精确大小<代码>浮动由于其本质是一种“打破规则”的方式，当涉及到元素流时，它是一种笨拙的机制，无法为您想象的任何布局问题提供简单的答案。@millimoose:该死，这可能就是我的问题的答案；但是，没有人提议显示：表格单元格。我只需要再问一个（对我来说）关于这种div大小的问题。

<div class="d0 d1">
    Left
</div>
<div class="d0 d2">
    Right
</div>
<div class="d0 d3">
    Center
</div>

.d0 {
    height: 100px;
    border: 1px solid #333;
}

.d1 {
    float: left;
    width: 100px;
}

.d2 {
    float: right;
    width: 100px;
}

.d3 {
    overflow: hidden;
    width: auto;
    margin: 5px;
}