一.浮动的分类：
- 左浮动
- 右浮动
- 清除浮动
二.浮动的理解：
1.我们可以把浮动看做一个气泡，浮动就是漂浮的意思。网页顶端看做水面，模块浮动到网页顶端第一行。
2.非浮动的模块会默认显示在第一行，而且页面的每一行只能显示一个非浮动的模块。
三.浮动案例：
我们想要得到如图的操作：
从图中我们发现有三个块是在一行的，前面我们已经提到，非浮动的块是独占一行的，现在要想让块都能在一行，那就必须让3个块都处于浮动状态，那么能不能让第一个块不浮动，其余浮动呢？
当然也不行，原因是，我们把块看成一个气泡了，它漂浮起来会遮盖住第一个块。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">#black1{
background-color:blue;
}
#balck2{
backgroud-color:yellow;
}
#black3{
background-color:gray;
}
div{
width:100px;
height:100px;
float:left;
border:solid 1px black;
}</style>
</head>
<body>
<div id="black1">块1</div>
<div id="black2">块2</div>
<div id="black3">块3</div>
</body>
</html> 通过以上代码实现，代码实现思路：
1.用3个
div
包住三个块，形成蓝色块，黄色块，灰色块。
2.采用id选择器，对三个块的id进行赋值：
black1
，
black2
，
black3
.
3.设置
style
样式，进行CSS样式设置，修改块的样式
样式修改代码：
<style type="text/css">#black1{
background-color:blue;
}
#balck2{
backgroud-color:yellow;
}
#black3{
background-color:gray;
}
div{
width:100px;
height:100px;
float:left;
border:solid 1px black;
}</style> 在其中我们通过标签选择器对所有块进行了宽高的定义，还定义了我们重点要说的浮动。
<style type="text/css">div{
width:100px;
height:100px;
float:left;
border:solid 1px black;
}</style> 我们定义左浮动的方法：
float:left
;
我们定义右浮动的方法：
float:right
;
四.浮动的特殊情况
1.我们发现，如果要完成上图的效果的话，应该是这种情况：
块1和块2都要左浮动，那么块3的情况呢？
答：块3的情况一定不是非浮动那么简单就完了，因为，块3非浮动的话会导致块3跑到第一行被块1遮挡住。
所以对于块3我们进行单独特殊处理，上代码：
<style type="text/css">#black1{
background-color:blue;
float:left;
}
#balck2{
backgroud-color:yellow;
float:left;
}
#black3{
background-color:gray;
clear:left;
}</style>