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

Question

我有一个与CSS Auto Margin pushing down other elements 类似的问题：右侧浮动侧边栏被推到主非浮动内容 div 下方。 answer 提议的作品：只需颠倒标记的顺序并写出浮动 div before 非浮动 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>

那么，为什么不重新排序也可以工作：Elastic layout with max-width and min-width using grid based design？ 查看live demo。标记的顺序仍然是明智的：浮动 div 写在非浮动 div 之后。然而浮动并没有被向下推到页面上。

我问是因为我不想为了正确设置样式而不得不破解主题 PHP（重新排序 div）。

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

• 2 column div layout: right column with fixed width, left fluid
• Semi Fluid Layout CSS/Html

Answer 1

您链接的原因是因为其他列也浮动

Answer 2

之所以有效，是因为您的包含元素没有高度。当您在包含元素中只有浮动元素时，它将折叠到 0 高度。例如，如果您要添加溢出：隐藏；到#fluidColumnContainer，它将充当清除修复，扩展容器以包含浮动元素。然后你会看到右浮动元素再次下拉。