如下面代码示例的一个布局：

<div id="box">
  <div id="top"></div>
  <div id="main"></div>
  <div id="bottom"></div>
</div>

CSS代码如下：

#box {
    width: 202px;
    margin: 0 auto;
    padding: 2px;
    border: 1px solid #999999;
}
#top {
    height: 30px;
    width: 200px;
    float: left;
    margin-bottom: 2px;
    border: 1px solid #99CCCC;
}
#main {
    height: 150px;
    width: 200px;
    float: left;
    margin-bottom: 2px;
    border: 1px solid #FFCC99;
}
#bottom {
    height: 20px;
    width: 200px;
    float: left;
    border: 1px solid #CCCC99;
}

这里ID="box"的容器不指定高，如果不添加float: left;的话，那么所有浏览器显示效果如图1所示，但如果添加上float: left;后，Dreamweaver和Firefox的显示效果就如图2所示了。虽然IE7的显示效果始终是图1所示，不过……都知道IE不是一个符合标准的浏览器。
在这个例子中加不加浮动控制无大碍，但在复杂点的布局中肯定是需要用到的。请问大家这问题怎么解决？

图1：

图2：


[[it] 本帖最后由 zys4416 于 2008-7-23 10:47 编辑 [/it]]

我实验发现#box中添加float:left;后就OK了！不过，整个页面就不居中了……

再次试验，在#box下再嵌套一个#box2，代码如下：
#box {
    width: 206px;
    margin: 0 auto;
    padding: 2px;
}
#box2 {
    width: 202px;
    float: left;
    padding: 2px;
    border: 1px solid #999999;

#box是隐藏的，基本解决了问题……

不错，学习了。。。。。。

不错学习一下。

可以设置#bottom的属性:clear: both;并且不要设置任何浮动方式float;