为什么浮动 div 和非浮动 div 的顺序仅在某些情况下才重要？

我有类似的问题CSS 自动边距压低其他元素：右侧浮动侧边栏被推到主非浮动内容 div 下方。这answer建议的工作：只需颠倒标记的顺序并写出浮动 divbefore非浮动 div。

例如，这个：

<div class="container">
    <div id="non-floating-content">
        fooburg content
    </div>
    <div id="float-right">
        test right
    </div>
</div>

需要尴尬地重新排序为：

<div class="container">
    <div id="float-right">
        test right
    </div>
    <div id="non-floating-content">
        fooburg content
    </div>
</div>

那么，为什么这也可以在不重新排序的情况下工作：使用基于网格的设计，具有最大宽度和最小宽度的弹性布局？ 查看现场演示。标记的顺序仍然合理：float div 被写出after非浮动 div。然而，浮动并没有在页面上被推下。

我问这个问题是因为我不想为了正确地设计它的样式而修改 PHP 主题（重新排序 div）。

其他帖子也说解决方案是“重新排序你的 div”：

• 2 列 div 布局：右列固定宽度，左列流体
• 半流体布局 CSS/Html

这样做的原因是因为您的包含元素没有高度。当包含元素内只有浮动元素时，它会折叠到 0 高度。例如，如果您要添加溢出：隐藏；对于#fluidColumnContainer，它将作为一个明确的修复，扩展容器以包含浮动元素。然后你会看到右浮动元素再次下拉。