Css div中的Float left在IE7中不起作用，但在Firefox和IE8中起作用

当我有三个div的时候，所有的div都是float，我希望这些部分根据它们内部数据的长度进行扩展或收缩

例如，如果第一个地址很长，我希望第一个框展开，并将第二个框推过来。在Firefox中，它是这样做的，但在InternetExplorer中，它需要一个宽度才能看起来正确。在IE7中，它根本不显示为右-每个div都有一个包含两列的表，在IE7中，尽管在第二列上设置了align=left并在第一列上设置了一个小宽度，但它将第二列显示在页面的远侧，而不是紧贴第一列。我在母版页中指定了文档类型，并尝试添加clear：两者都没有运气

为什么宽度完全改变了浮动部分在IE中的显示方式？我如何解决这个问题？在IE7中，页面必须看起来很好

.FloatingSection
{
    float:left;
    padding-bottom:10px;
    padding-right:10px;
}

<div id="FirstPerson" class="FloatingSection">
</div>
<div id="SecondPerson" class="FloatingSection">
</div>
<div id="ThirdPerson" class="FloatingSection">
</div>   

.FloatingSection
{
浮动：左；
垫底：10px；
右边填充：10px；
}

---

我注意到，在IE8中，这看起来很好。

在浮动元素时，几乎应该始终包含显式宽度

如果你不知道，浏览器必须猜出你的意思。在这种情况下，Firefox比IE猜测得更好，但你不应该让他们猜测。尽可能明确

---

编辑：若你们想让所有三个框都随着内容展开，我建议你们设置基于百分比的宽度。一般来说，您需要查找技术。

您考虑过

显示：内联块而不是浮动块吗？我认为，如果不使用一些JS来明确定义每个浮动元素的宽度，就无法使用浮动和支持IE来做任何事情

另一个注意事项是，您必须为IE中的块级元素声明第二个单独的规则：

HTML:

刚刚发现，如果你有一个浮动和一个明确的应用到一个DIV IE7扼流圈

相反，在DIV的CSS中指定float，但删除clear并在相关DIV之后放置一个空DIV，如下所示：

之前：

<div style="float:left; clear:right;">Content goes here</div>

内容在这里

之后

内容在这里
一个显式的宽度会挫败我想做的事情。我希望宽度根据内容动态变化，而不是固定不变。在看了更多内容后，我决定可以设置浏览器黑客，使其在IE 7与IE 8和Firefox中的表现有所不同，或者只是处理这样一个事实，即它在IE 7中永远不会正确，而是固定宽度。我决定采用后者。忽略旧版本的IE是一个我将永远支持的决定=）IE无疑是我使用过的最糟糕的浏览器。
.foo { display:inline-block; }
.foo { display:inline; } /* Feed this to IE below 9 only with a CC. Don't feed it to modern browsers */

<div style="float:left; clear:right;">Content goes here</div>

<div style="float:left;">Content goes here</div>
<div style="clear:right;"></div>