浮动，是CSS布局中必须经过的一道坎，假设不熟悉浮动。那么CSS的布局就如同空中楼阁，而谈到浮动，很多其它的是和div相结合，div是一个块级元素。这个我前面的博文有介绍，假设大家喜欢我的风格，能够搜索下。
以下我们进入正题，所谓浮动。能够用css的属性float来定义。比方float:left就是向左浮动，float：right就是向右浮动，我们先看一个不浮动的样例把，首先是这个html文件，这个文件我们是一直都不会动它了，它的内容例如以下：
<html> <head> <link rel="stylesheet" type="text/css" href="my.css"> </head> <div id = "demo1">区块1</div> <div id = "demo2">区块2</div> <div id = "demo3">区块3</div> <div id = "demo4">区块4</div> </html>然后我们写一下它的相应的my.css文件，内容例如以下：
#demo1{
background-color: #933;
height: 100px;300px;
}
#demo2{
background-color: #0F0;
height:60px;200px;
}
#demo3{
background-color: #F00;
height: 140px; 80px;
}
#demo4{
background-color: #CCC;
height: 80px; 180px;
}那么此时它的界面例如以下：
以下我们通过在第二个div那里让它右浮动，加入以下一条信息，即：
#demo2{
float: right;
background-color: #0F0;
height:60px;200px;
}我上面仅仅给出了demo2的变化，然后我们看以下的效果：
以下说一下什么是“普通流”，可能这是会让新手朋友特别迷茫的一个话题。所谓普通流，就是向书本一样。从上到下，从左到右进行布局，正常的HTML元素都是在普通流中的。而一个元素一旦浮动，它就不在普通流中了。比方我们的区块2是右浮动的，它会去寻找他的上边一个元素，它上一个元素是区块1。而区块1是普通流中的元素。则区块2就和区块1的底部是对齐的，普通流决定了它的上下位置，浮动仅仅能决定它的左右位置，一旦上下位置 被确定，那么接下来就是它的左右位置了。因为它是右浮动，因此，它在右边。而区块三去找它的上一个元素，发现它的上一个元素是标准流中的元素。因此，它会自己主动和区块1的低端对齐。而且向下排列。
那可能有人会问，假设区块2左浮动呢。我们把demo2的float属性改动为left。而且我们改动一下区块三的宽度。让它更宽一些，要不解释不清楚，效果图例如以下：
我想上图的解释也算比較清楚了，就不再文字说明了。可能有人会问，那么假设两个区块一起浮动呢？我们先来看都是右浮动的情形：
因为这里的宽度足够宽，这样的布局全然放得下，可是，假设我们把宽度变窄呢？看以下图解：
事实上这里还算好理解的。那么我们继续向左拉伸呢？会出现以下的情况：
事实上仅仅要宽度足够宽。区块3依旧是和区块2的左边而不是在它的以下，可是宽度太低的情况下就不是这样了，它非常无奈的跑到了区块2的以下，然后另起一行，从右边開始排列。
事实上右浮动会定位了，那么左浮动也就非常清楚了。它的效果例如以下：
事实上相同的，假设空间过小，那么区块3也会被挤下去。挤到新的一行中。例如以下代码：
于是，能够总结为这么一句话：“浏览器首先对处于普通流的区块进行排列，它们非常easy。从上到下进行排列就可以。对于浮动的元素，它会查看它上面的元素近期的哪一个处于普通流中的元素，而且把它的底端当成自己的顶端，然后依据浮动规则。继续排列。因为是先进行的普通流的布局。因此，浮动的元素会遮盖普通流中的元素。”
这一节先说到这里啦。。。 以下再開始说清楚浮动的。。。。