影响div背景色显示的问题

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

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

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

问题现场还原如下：

1. 在一行中排列三个div，分别用了左浮动和右浮动属性，其父div的背景色却羞羞答答始终不愿意出现，这是什么鬼？

      原因： 由于产生了浮动，导致外层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设置背景色。

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