> enter code here 我有以下html/php：
<div class="footerbottom">
<span class="footermenuitem">
<span class="footermenutitle">PRODUCTS</span>
<?php $menu = menu_navigation_links('menu-products');
print theme('links__menu_products', array('links' => $menu)); ?>
</span>
<span class="footermenuitem">
<span class="footermenutitle">APPLICATIONS</span>
<?php $menu = menu_navigation_links('menu-applications');
print theme('links__menu_applications', array('links' => $menu)); ?>
</span>
<span class="footermenuitem">
<span class="footermenutitle">BRANDS</span>
<?php $menu = menu_navigation_links('menu-brands');
print theme('links__menu_brands', array('links' => $menu)); ?>
</span>
</div>
还有以下 CSS：
.footerbottom {
background-color: #2b2b2b;
color: #cccccc;
width: 100%;
z-index: 3;
margin-top: 200px;
}
.footerbottom ul {
list-style: none;
}
.footerbottom li a {
color: #cccccc;
}
.footerbottom li a:link {
color: #cccccc;
}
.footerbottom li a:visited {
color: #cccccc;
}
.footerbottom li a:hover {
color: #cccccc;
}
.footerbottom li a:active {
color: #cccccc;
}
.footermenutitle {
font-size: large;
color: #fdbe6e;
}
.footermenuitem {
float: right;
margin-right: 20px;
}
出于某种原因，所有这些区域的背景都不是灰色的。为什么？我该如何解决这个问题？
问题是您的.footerbottom包含浮动元素，因此您需要清除它们，声明overflow: hidden;属性footerbottom
.footerbottom {
background-color: #2b2b2b;
color: #cccccc;
width: 100%;
z-index: 3;
margin-top: 200px;
overflow: hidden;
}
演示
好吧，这是一个快速修复，但并没有好多少，如果您不希望支持较旧的IE版本，如果需要，请在父元素上使用clearfix类来自行清除它。
.clear:after {
content: "";
clear: both;
display: table;
}
<div class="footerbottom clear">
<!-- ... Other code -->
</div>
演示 2
有关此行为的更多信息，请参阅此处和此处的答案
将高度添加到：
.footerbottom {
background-color: #2b2b2b;
color: #cccccc;
width: 100%;
height: 200px
z-index: 3;
margin-top: 200px;
}