CSS中的流-普通流,浮动流,定位流

今天在做网页的时候遇到一个很奇怪的问题,一个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的高度撑开了,背景色就显示出来了。 ru oltatravelwin real money online casino

Leave a Comment