一.浮动的分类：
- 左浮动
- 右浮动
- 清除浮动
二.浮动的理解：
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>
观察到了吗？这里用的是clear:left;,这是清除左浮动的意思啊。这样才会导致块3进行换行操作，当然你用clear:right;的效果其实会一样的。
五.浮动总结
在进行网页排版的时候，块的分布我们可以用浮动来处理，当然后边学会用定位来处理问题会变得更容易。
