首页 >> 网站技术 >> CSS中的流-普通流,浮动流,定位流

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

Catagory:网站技术, Date:2010年04月15日,Author: 工业品营销-贾定强

今天在做网页的时候遇到一个很奇怪的问题,一个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

来源:工业品营销,原文地址:http://www.jiadingqiang.com/409.html,欢迎分享本文,转载请保留出处!

你也来说几句:

名字*必填
邮箱*必填,不会被公开
网站
QQ群交流
最近文章
文章归档
  • 2017 (16)
  • 2016 (31)
  • 2015 (63)
  • 2014 (21)
  • 2013 (38)
  • 2012 (25)
  • 2011 (67)
  • 2010 (268)
  • 2009 (19)