1.浮动的产生
一般由于子标签使用了float属性，使得父级标签无法按照预想的那样撑开，这样就会产生浮动。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#div{
border: 1px solid red;
width: 250px;
}
#div1{
width: 100px;
height: 100px;
float: left;
border: 1px solid black;
}
#div2{
width: 100px;
height: 100px;
float: right;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="div">
<div id="div1"></div>
<div id="div2"></div>
</div>
</body>
</html>
效果图：
2.产生浮动的影响
背景不能显示：由于父级标签无法撑大，给了background也无法显示边框不能撑开：如上图很明显，父级边框还是一条线margin，padding设置值无法显示
3.解决方案
1.在已知的情况下给父级标签height值
代码
#div{
border: 1px solid red;
width: 250px;
height: 110px;
}
效果图：
2.clear：both清除浮动
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#div{
border: 1px solid red;
width: 250px;
}
#div1{
width: 100px;
height: 100px;
float: left;
border: 1px solid black;
}
#div2{
width: 100px;
height: 100px;
float: right;
border: 1px solid black;
}
#div3{
clear: both;
}
</style>
</head>
<body>
<div id="div">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
</body>
</html>
效果图：
3.父级div添加overflow：hidden属性及属性值
代码
#div{
border: 1px solid red;
width: 250px;
overflow: hidden;
}
效果如上图
4.总结
以上三点即是兼容各大浏览器清除浮动的方法，其它有的浏览器不兼容有的不兼容的方法就没必要介绍了，大家记住以上三点解决float浮动清除浮动方法。但这里推荐第 三点和第二点解决清除浮动方法。
