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

1. 海外社媒客户开发工具【免费】了,帮你从GG/FB/Ins/谷歌地图上免费获取客户

2. WhatsApp 聊天记录保险【99元/年】,聊天记录不怕丢。自带翻译、多开,号码抓取、群发

3. 外贸网站搭建、谷歌SEO、社媒运营、企业WhatsApp管理、外贸管理软件、AI应用,【联系我】

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

1. 海外社媒客户开发工具【免费】了,帮你从GG/FB/Ins/谷歌地图上免费获取客户

2. WhatsApp 聊天记录保险【99元/年】,聊天记录不怕丢。自带翻译、多开,号码抓取、群发

3. 外贸网站搭建、谷歌SEO、社媒运营、企业WhatsApp管理、外贸管理软件、AI应用,【联系我】

微信扫一扫 或 点击链接联系我

仍有疑问,点击 链接,加个 微信 好友,一起交流。

发表评论