IE7中奇怪的浮动行为

Question

我想用标题栏创建一个简单的框，其中包含标题和一些工具按钮。我有以下标记：

<div style="float:left">
    <div style="background-color:blue; padding: 1px; height: 20px;">
        <div style="float: left; background-color:green;">title</div>
        <div style="float: right; background-color:yellow;">toolbar</div>
    </div>
    <div style="clear: both; width: 200px; background-color: red;">content</div>
</div>

这个可以解决吗？

Answer 1

在最外面的div中指定宽度。如果内容div中的宽度表示此框的总宽度，则只需将其添加到最外面的div中，然后（可选）将其从内容中删除，如下所示：

<div style="float:left; width: 200px;">
    <div style="background-color:blue; padding: 1px; height: 20px;">
        <div style="float: left; background-color:green;">title</div>
        <div style="float: right; background-color:yellow;">toolbar</div>
    </div>
    <div style="clear: both; background-color: red;">content</div>
</div>