对象盒子不能被撑开，这样CSS float浮动就产生了。
1、背景不能显示
由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景
图片，而父级不能被撑开，所以导致CSS背景不能显示。
2、边框不能撑开
如上图中，如果父级设置了CSS边框属性（css border），由于子级里使用了float
属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。
3、margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。
特别是上下边的padding和margin不能正确显示。
<!DOCTYPE html>
<html>
<head>
<title>CSS清除浮动 清除float浮动</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.boxa {
background: #ddd;
border: 5px solid green;
margin:0 auto;
400px;
/*height: 80px;*/ /*方法一：对父级设置适合CSS高度*/
/*overflow: hidden; */ /*方法二：父级div定义 overflow:hidden*/
}
.boxb {
margin:0 auto;
400px;
}
.boxa-l {
float:left;
280px;
height:80px;
border:1px solid #F00;
background: black;
}
.boxa-r {
float:right;
100px;
height:80px;
border:1px solid #F00;
background: pink;
}
.boxb {
border:1px solid #000;
height:40px;
background: yellow;
}
.clear{
clear:both
}
</style>
</head>
<body>
<div class="boxa">
<div class="boxa-l">内容左</div>
<div class="boxa-r">内容右</div>
<div class="clear"></div> <!--方法三：clear:both清除浮动 -->
</div>
<div class="boxb">boxb盒子里的内容</div>
</body>
</html> 清除浮动前：
清除浮动后：
备注：欢迎加入web前端求职招聘qq群：668352707