在写程序的过程中经常会遇到这样的问题：希望某一个块或者元素到我指定的区域。这就涉及到定位和浮动的问题，下面我将详细说明css中的浮动。
一、浮动（float）-------
正常文档流中：块级元素从上到下依次排列，内嵌元素从左到右依次排列。
浮动：顾名思义，指元素从正常文档流中脱离出来，按照我们的想法而使元素达到指定的区域位置的功能。
1、浮动的对象：css中我们可以浮动任何元素，包括段落、列表、div、图像等。
2、浮动的功能，浮动是基于css的现代web设计用到的主要功能之一：
a、它可以用来创建多列的网页布局；
b、从无序列表创建导航工具条；
c、不适用table而创建类似表格的对齐方式等。
3、浮动的属性：none （不浮动）、right（向右浮动）left（向左浮动）
示例：
float:left 在css中写 .a {width：100px;height:100px;background:white;}
.b {width：30px;height:50px;background:gray;float:left;} （float:right ）
.c {width：30px;height:50px;background:red;float:left;} (float:right)显示结果是两个方块均靠右
在html 中调用 <div class="a">
<div class="b"></div>
<div class="c"></div>
</div>
显示的结果是：在整个块c中，a显示在左边，b接在a的后面显示。
float:right 在css中写 .a {width:100px;height:100px;background:yellow;}
.b {width:30px;height:50px;background:gray;float:left;} （float：right）
.c {width:30px;height:50px;background:red;float:right;} （float：left）显示结果同下图相同
在html 中调用 <div class="a">
<div class="b"></div>
<div class="c"></div>
</div>
显示的结果是：在整个块c中，a靠左padding区域内，b靠右显示在c的padding区。
4、浮动的基本行为：
a、当float不等于none引起浮动时，元素将被视作块级元素（即浮动只对块级元素产生影响），若想要对内嵌元素产生浮动，需将内嵌元素定义为块级元素（使用 display:block）。
b、当需要对一个段落进行浮动时，需要指定该元素的宽度（width），不然，元素内容会折叠刀最可能的最小宽度。
c、浮动的元素会停留在它的父级元素padding区域内。
d、浮动元素的margin不会重合。
e、不被块级元素包含的浮动元素的顶部不能比前面的块级元素高。
产生浮动后，我们在某些时候希望浮动能被清除掉，使我们后面的元素能按照正常的文档流执行。
二、清除浮动（clear）
clear：阻止一个元素出现在浮动元素的后面，使clear后面的元素能按照文档流的正常顺序执行。
clear属性:none （两边都可以有浮动元素） left （不允许左边出现浮动元素） right （不允许右边出现浮动元素） both（两边都不允许出现浮动元素）
（温馨提示：none 和 both一定不要弄反了哦，我自己刚开始就。。。。你懂得！）
clear 只能用于块级元素