今天在做网页的时候遇到一个很奇怪的问题，一个div，我给它加背景色，可怎么也加不上。程序简化了一下，大概如下：

<style>

#parent { background-color: #FF9; height: auto; width: 500px; }

#left { float: left; height: 100px; width: 250px; }

#right { float: left; height: 100px; width: 250px; }

</style>

<div>

<div>此处显示 id “left” 的内容</div>

<div>此处显示 id “right” 的内容</div>

</div>

我的思路是外面的DIV尽量不要固定它的高度，让里面的DIV把它撑开，然后给它加上背景色。可结果是背景色怎么也加不上。

后来经过一番研究，把#parent的DIV改成

#parent { float: left; background-color: #FF9; height: auto; width: 500px; }就好了。

这个问题的原因是CSS中的流的概念不清晰造成的。在CSS中有三种流，普通流，浮动流，绝对定位与相对定位流。这三种流是互相不包含的。

在本例中，#parent是普通流，而#left，#right是浮动流，虽然在程序里是parent包含了left，right，但实际上它们并不在一个流里。也就是说left和right的高度并没有将parent的高度撑开，使得parent的实际高度还是0。当然它的背景色也就显示不出来。当把parent改为浮动流之后，三个div在一个流里，这样，left和right的高度就自动将parent的高度撑开了，背景色就显示出来了。