这个问题在这里已有答案：
我是Web开发的新手，我试图用一个简单的CSS网站做一个简单的CSS网站样式和一点PHP，我目前面临使用CSS后使用CSS的问题：左边的div
.mid-bar {
background-color: red;
}
.mid-bar li {
float: left;
list-style-type: none;
margin-right: 5px;
padding: 5px 2px;
}<div class="mid-bar">
<ul>
<li>Hello There !</li>
</ul>
</div>这一个向左浮动，但背景不会改变
任何帮助，将不胜感激
谢谢！
将子元素作为浮动元素的父元素将会失去高度，请使用clearfix类，了解更多阅读here
.mid-bar
{
background-color: red;
}
.mid-bar li
{
float: left;
list-style-type: none;
margin-right: 5px;
padding: 5px 2px;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */<!doctype>
<html>
<head>
<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
<div class="mid-bar clearfix">
<ul>
<li>Hello There !</li>
</ul>
</div>
</body>
</html>