为什么float div和non-float div的顺序仅在某些情况下有效？

Question

我遇到与CSS Auto Margin pushing down other elements类似的问题：右侧浮动侧边栏被推到主非浮动内容div下方。 answer提议的工作：只需反转标记的顺序，并在非浮点div之前写出float 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

这样做的原因是因为你的包含元素没有高度。如果在包含元素中只有浮动元素，它将折叠到0高度。例如，如果您要添加overflow：hidden;对于#fluidColumnContainer，它将作为一个明确的解决方案，扩展容器以包含浮动元素。然后你会看到右浮动元素再次下降。

Answer 2

你链接的工作原因是因为其他列也是浮动的