Html 包装中未显示背景色

由于某种原因，#CCC背景（100%宽度）没有显示在下面的代码中。你知道为什么吗？Tks

.wrap100pc{
宽度：100%；
保证金：自动；
背景：#ccc；
}
#左下角{
浮动：左；
宽度：490px；；
背景#5421c2；
高度：300px；
}
#右下角{
浮动：对；
宽度：490px；；
背景：#2ec4a6；
高度：300px；
}
.清楚：之后{
明确：两者皆有；
}
左下角
右下角

要恢复背景，请将

溢出：auto

添加到您的

#包装器中

.wrap100pc {
    width: 100%;
    margin: auto;
    background: #ccc;
    overflow:auto;
}


浮动的子div有其自己的块格式上下文，应用overflow:auto（或hidden）会生成您要查找的结果。有关块格式上下文的详细解答，请参见
您只需将
float:left
添加到包装器中即可：


编辑：如果您不希望它浮动，使用
溢出
的另一个答案也可以。
无需将
溢出：自动
添加到
div#包装
。您的
.clear
样式定义不固定
.wrapper
高度

将其更改为：

.clear:before,
.clear:after {
    content: " ";
    display: table;
}

.clear:after {
    clear: both;
}

解决你的问题

您需要为
.wrap100pc
指定
高度

希望有帮助
 溢出：隐藏；太好了：）呸，比我快！：）或许可以进一步解释一下为什么@KevinCittadini（即浮动）正在撰写并更新你的评论；）@kunalbhat-当你发表评论时，我正在添加解释。感谢你的回答j08691，但由于某些原因，它与我的完整代码不兼容-你知道为什么吗？这是一个更新的fiddle zith完整代码：jsfiddle.net/DzaCq/5问题出在你的
样式定义中。清楚
样式定义。谢谢你的回答，但由于某种原因，它不能与我的完整代码一起使用-你知道为什么吗？这是一个更新的提琴齐兹完整的代码：@Greg yes。您需要将一个完整的包装器添加到您的
div.wrap980px
，并应用
背景色。以下是已更新的完整代码：。无需应用
溢出：自动
.wrap100pc {
    width: 100%;
    margin: auto;
    background: #ccc;
    float:left;
}

.clear:before,
.clear:after {
    content: " ";
    display: table;
}

.clear:after {
    clear: both;
}