IE 7浮动问题不忽略内容

Question

我在IE7中遇到了一个问题。我已经创建了下面的html来演示可能的“问题”。

HTML：

<div id="container">
    <div id="head">
    </div>
    <div id="left">
    </div>
    <div id="right">
    </div>
    <div id="no-float">
    </div>
</div>

CSS：

#container {
    width:200px;
    height:200px;
    margin: 0 auto;
    background-color:#555555;
}
#head {
    width:200px;
    height:20px;
    background-color:black;
    float:left;
}
#left {
    width:100px;
    height:40px;
    background-color:blue;
    float:left;
}
#right {
    width:100px;
    height:40px;
    background-color:red;
    float:left;
}

#no-float {
    width:20px;
    height:20px;
    position:relative;
    background-color:green;
}

现在，我希望绿色的非浮动div位于容器的最左上角，因为据我所知，正常的内容应该完全忽略浮动内容。这在我测试过的所有非IE7浏览器中都能正常工作。是我对浮点数的理解有问题，还是这是IE7中的一个bug？如果这是一个bug，谁能给我指出正确的方向来修复它？以下是问题的一小部分。

JSFiddle

Answer 1

IE7的浮动模型太可怕了。See here用于与您的问题相关的问题，以及为什么它不能通过仅使用浮点数来修复。如果你想让你的元素保持源代码的顺序，你必须求助于绝对定位。这可以有条件地提供给IE7，或者它可以像所有现代浏览器一样工作。

Here is the fiddle.

将position: relative添加到#container，然后

#no-float {
    width: 20px;
    height: 20px;
    position:absolute;
    background-color:green;
    top: 0;
    left: 0;
}