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

Question

我有一个类似于CSS Auto Margin按下其他元素的问题:右浮动侧边栏被推到主非浮动内容div下面.建议的答案是:只需反转标记的顺序,并在非浮点div 之前写出浮点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 在非浮点div 之后写出.然而浮动不会被推到页面上.

我问,因为我不想破解主题PHP(重新排序div)以便正确地设计它.

其他也说解决方案的帖子是"重新订购你的div":

• 2列div布局:右列有固定宽度,左侧流体
• 半流体布局CSS/Html

Answer 1

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