Question

我有2个带有容器div的div。我将容器的背景颜色设置为白色，并没有为其他2个div设置颜色。由于容器的颜色，期待看到白色背景，但一切都是透明的。这是正常的吗？看起来容器的颜色没有被考虑在内。 Tks http://jsfiddle.net/Grek/svt2s/

CSS

#team-container
{
    width:960px;
    background-color:#FFFFFF;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=83)";
    filter: alpha(opacity=83);
    opacity: 0.83; /* For IE8 and earlier */
    margin-left: auto;
    margin-right: auto;
    background: #fff;
}

#team-left {
color:#000;
padding-left:20px;
padding-top:20px;
/* padding:15px;*/
width: 30%; 
float: left;
position: relative; 
}

#team-right { 
font:12px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight:400;
padding-left:25px;
padding-top:28px;
color:#000;
width: 60%; 
float: left;
position: relative; 
text-align:justify;
}

Answer 1

背景颜色和不透明度不是可继承的属性。如果没有为任何特定元素/选择器定义它，则不会设置它。

Answer 2

父元素必须包含其浮动子元素，否则父元素不会占用布局中的任何空间（出于布局目的，它的高度为0）。这就是为什么你没有看到父母的白色背景。

你可以用两种方式之一包含浮动的孩子（两者都完成同样的事情）：

<强> clearfix

.clearfix {...}   /* Insert standard clearfix code here */
...
<div id="team-container class="clearfix">
    <div id="team-left"></div>
    <div id="team-right"></div>
</div>

clear div

.clear {clear:both;}
...
<div id="team-container">
    <div id="team-left"></div>
    <div id="team-right"></div>
    <div class="clear"></div>
</div>

Modified demo带有明确的div和浅灰色背景。

带有clearfix和浅灰色背景的

Modified demo。

为什么我的背景透明？

2 个答案: