为什么float div和non-float div的顺序只在某些情况下有效？ [英] Why does order of float div and non-float div matter only in some cases?

问题描述

我遇到类似的问题，如 CSS Auto Margin（其他元素） a>：右边的浮动边栏被下推到主要的非浮动内容div。 回答建议的作品：只是颠倒顺序

I have a similar problem as CSS Auto Margin pushing down other elements: A right floating sidebar gets pushed down below the main non-floating content div. The answer proposed works: just reverse the order of the markup and write out the float div before the non-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>

那么，为什么没有重新排序也可以工作：使用基于网格的设计的最大宽度和最小宽度的弹性布局？
查看现场演示。标记的顺序仍然是明智的：float div在之后写在非浮点div之后。但是浮动不会被压在页面上。

So then, why does this also work without reordering: Elastic layout with max-width and min-width using grid based design? Check out the live demo. The ordering of the markup is still sensible: the float div is written out after the non-float div. Yet the float doesn't get pushed down on the page.

我问，因为我宁愿不必修改主题PHP（重新排序divs），以

I ask because I would prefer not to have to hack the theme PHP (to reorder divs) in order to properly style it.

其他帖子也解释是重新排序你的divs：

Other posts that also say the solution is to "re-order your divs":

• 2栏div布局：右列固定宽度，左流体


• 半流体布局CSS / Html

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

推荐答案

工作原理是因为你的元素没有高度。当你只有浮动元素在一个包含的元素，它会折叠到0的高度。如果你是，例如，添加overflow：hidden;到#fluidColumnContainer，它将作为一个清除解决方案，扩展容器以包含浮动元素。然后你会看到右浮动元素再次下降。

The reason this works is because your containing element has no height. When you have nothing but floated elements inside a containing element, it will collapse to 0 height. If you were, for example, to add overflow: hidden; to #fluidColumnContainer, it would act as a clear-fix, expanding the container to contain the floated elements. Then you would see the right-floated element drop down again.

这篇关于为什么float div和non-float div的顺序只在某些情况下有效？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！