在标准流中，一个块级元素在水平方向会自动伸展，直到包含它的元素的边界，而在竖直方向和兄弟元素依次排列，不能并排。使用浮动方式后，块级元素的表现就会有所不同了。
CSS有一个“float”属性，默认为none，即“不浮动”，也就是在标准流中的通常情况，如果将float属性的值设置为“left”或“right”，元素就会向其父元素的左侧或右侧靠紧，同时默认情况下（没有设置width属性的情况）盒子的宽度不再伸展，而是收缩，根据盒子里面的内容的宽度来确定的。
浮动的性质比较复杂，这里先制作一个基本的页面：
一、页面对应的代码：
1、HTML部分代码：
<body>
<div class="father">
<div class="son1">Box-1</div>
<div class="son2">Box-2</div>
<div class="son3">Box-3</div>
<p>法兰、拉杜与兰乔是皇家工程学院的学生，三人共居一室，结为好友。在以严格著称的学院里，兰乔是个非常与众不同的学生，他不死记硬背，甚至还公然顶撞校长“病毒”，质疑他的教学方法。他不仅鼓动法兰与拉杜去勇敢追寻理想，还劝说校长的二女儿碧雅离开满眼铜臭的未婚夫。</p>
</div>
</body>
<div class="father">
<div class="son1">Box-1</div>
<div class="son2">Box-2</div>
<div class="son3">Box-3</div>
<p>法兰、拉杜与兰乔是皇家工程学院的学生，三人共居一室，结为好友。在以严格著称的学院里，兰乔是个非常与众不同的学生，他不死记硬背，甚至还公然顶撞校长“病毒”，质疑他的教学方法。他不仅鼓动法兰与拉杜去勇敢追寻理想，还劝说校长的二女儿碧雅离开满眼铜臭的未婚夫。</p>
</div>
</body>
2、CSS部分代码：
.father
{
background-color:#ffff99;
border:1px solid #111111;
padding:5px;
}
.father div
{
padding:10px;
margin:13px;
border:1px dashed #111111;
background-color:#6699FF
}
.father p
{
border:1px dashed #111111;
background-color:#ffbaff;
}
{
background-color:#ffff99;
border:1px solid #111111;
padding:5px;
}
.father div
{
padding:10px;
margin:13px;
border:1px dashed #111111;
background-color:#6699FF
}
.father p
{
border:1px dashed #111111;
background-color:#ffbaff;
}
3、这个页面中定义了4个div，其中一个是父块，另外三个子块嵌套在它的里面，为了便于观察将各div都加了边框和背景色，此时3个子div并没有设置任何浮动属性，它们就为标准流中的盒子状态，在父块的进而面，4个子块各自向右伸展，竖直方向依次排列；
二、设置浮动
1、为第一个子div设置向左浮动
.son1
{
float:left;
}
可以看到，标准流中的Box-2的文字在围绕着Box-1排列，而此时Box-1的宽度不再伸展，而是能容纳下内容的最小宽度。效果图如下：
2、把第二个子div设置向左浮动
.son2
{
float:left;
}
可以看到，Box-2也变为根据内容确定宽度，并使Box-3的文字围绕着Box-2排列。效果图如下：
3、把第三个子div设置向左浮动
.son3
{
float:left;
}
可以看到，文字所在的盒子（粉红背景）的范围，以及文字会围绕浮动的盒子排列。效果图如下：
4、将Box-3改为向右浮动
.son3
{
float:right;
}
可以看到Box-3移动到了最右端，文字段落盒子的范围没有改变，但文字变成了夹在Box-2和Box-3之间。效果图如下：
5、此时若把浏览器窗口慢慢调整变窄，Box-2和Box-3之间的距离就会越来越小，直到二者相接触；若浏览器窗口继续调窄，浏览器窗口就无法在一行中容纳Box-1、Box-2和Box-3这3个div了，此时Box-3会被挤到下一行中，但仍保持向右浮动，这时文字会自动布满空间，如图所示：
6、若将Box-2改为向右浮动，Box-3改为向左浮动，可以看到布局没有变，但Box-2和Box-3的位置交换了。效果图如下：
三、以上均是考虑在水平上的浮动，若Box-1中增加一行，Box-3增加三行，然后把三个子div都设置为向左浮动，效果会是怎么样的呢？
浏览器窗口逐步调整变窄，结果将会如何呢？Box-3会被挤到下一行，那么它会在Box-1的下面，还是Box-2的下面呢？
从图中可以看到Box-3被挤到下一行，并向左移动，到了这Box-1的拐角处就会被卡住，从而停留在Box-2的下面。
至此，关于浮动的性质想必已理解。
本文转自qingkechina 51CTO博客，原文链接：http://blog.51cto.com/qingkechina/1261747
，如需转载请自行联系原作者
