使用 :after伪元素撑开 div，
<html>
<head><style type="text/css">
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style>
</head>
<body>
<div class="clearfix" style="padding:1px 1px 1px 1px; border: 1px solid red; width:200px;">
<div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
<div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
<div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
<div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
<div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
</div>
</body>
</html>
TEST DIV
TEST DIV
TEST DIV
原文：http://www.cnblogs.com/npk19195global/p/4474914.html