可变宽度的浮动带来了可变的结果

当你想把div变成宽度可变的时候，生成浮动效果不一致的问题就浮现出来了。例如，假设你想要在页面的左侧放一个固定宽度栏，用于导航按钮的列表，而想在右侧放另外一个栏，让它根据浏览器窗口（的大小）自由扩展和收缩。

你可能会认为自己用两个左侧浮动的div就能实现这个效果；一个是固定宽度的，而另一个把宽度设定为自动，让div自动调整大小，这样它就能够填补第一个div和浏览器窗口右侧之间的空白。例C就是下面代码显示的结果：

div#one {
    float: left;
    width: 150px;
    margin: 0px;
    background-color: red;
}
div#two {
    float: left;
    width: auto;
    padding: 0px 10px 5px 10px;
    margin: 0px;
    background-color: silver;
}

如果在IE里显示这个例子，你会获得预计的效果，即左边是固定宽度的栏，紧挨着它右侧的是一个可变宽度的栏；但是，相同的代码在其他当前流行的浏览器上却会生成不同的结果。第二个div会掉到第一个的下面，而不是接着这一行放在右边。结果就和不带浮动的页面非常类似。