影响div背景色显示的问题

说来惭愧，走上程序猿这条不归路已经一年了，却连自己的博客都没有。看到道上有脸面的大神博客都做得贼漂亮~~于是，按捺不住了~~

今天终于开通了博客园博客，正式开始我的博客人生啦！！！~~吼吼~~

废话少说，说正事。今天工作中碰到了两个小问题，是关于div背景色显示的。按照正常的学术流程，应该分为如下描述：what——why——how

问题现场还原如下：

原因：由于产生了浮动，导致外层div撑不开，所以背景色不显示。

解决：在外层div上加上清除浮动。或者，对css用overflow：hidden。

HTML代码：

<div class="parent">

    <div class="fl"> 左</div>

    <div class="fl"> 右</div>

    <div class="fr"> 左</div>

</div>

CSS代码：

 .fl{

         float: left;

}

 .fr{

         float: right;

}

.parent{

    clear: both;    /*清除浮动*/

    overflow:hidden;

}

关键点：一定是对父div进行清除浮动操作，才能解决问题。

至此，问题解决。但是有一点小疑问：

overflow：hidden是将超出的部分隐藏，为什么此处对浮动致使背景不显示会有影响？此处留白，请求大神求解。

2. 对同一个div，可以即设置背景图片又设置背景色吗？

我看到网上说可以同时设置并可以实现效果。我的需求是背景色为白色，背景图片仅仅置于div底部一小块。尝试之下，发现未能实习效果。

解决方法：在外层再套一层div，给外层的div设置背景图片，内层div设置背景色。

至此，问题解决。也许解决方案不是最优的，期待大神指点。

秒客网