用途：用来实现并行。常用在div等块元素并行显示。
设置右浮动代码：float: right;
设置左浮动代码：float: left;
注意：
1.要浮动，所有盒子都要设置浮动。
2.行内元素如span，添加了float属性过后宽度和高度就有效了。（默认行内元素对宽度和高度不生效）
3.父盒子要足够宽，如果父盒子宽度不够了，则子会盒子掉下来，跑去前一个盒子的空间里。
如下图（没有设置浮动）：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<style>
.box{
width: 900px;
height: 300px;
background-color: rgb(0, 0, 255);
}
.box01{
width: 300px;
height: 300px;
background-color: rgb(0, 255, 255);
}
.box02{
width: 300px;
height: 300px;
background-color: rgb(0, 255, 55);
}
.box03{
width: 300px;
height: 300px;
background-color: rgb(255, 0, 0);
}
</style>
</head>
<body>
<div class="box">
<div class="box01">box01</div>
<div class="box02">box02</div>
<div class="box03">box03</div>
</div>
</body>
</html>如下图（设置了左浮动）：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<style>
.box{
width: 900px;
height: 300px;
background-color: rgb(0, 0, 255);
}
.box01{
width: 300px;
height: 300px;
background-color: rgb(0, 255, 255);
float: left;
}
.box02{
width: 300px;
height: 300px;
background-color: rgb(0, 255, 55);
float: left;
}
.box03{
width: 300px;
height: 300px;
background-color: rgb(255, 0, 0);
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="box01">box01</div>
<div class="box02">box02</div>
<div class="box03">box03</div>
</div>
</body>
</html>
