HTML网页制作：[20]制作浮动效果

1.不浮动的框框智能上下移动 2.浮动的框框可以左右移动 3.框框并不是无限的左右移动，当他碰到父元素的包含框或者另一个浮动框的边框，则停止 4.浮动框已经脱离了文本的普通流。你可以理解为我们人都是生活在地球的土地上，人和人是无法站在同一个地方的，因为空间无法重叠，无论是房子也好、其他也好都要有一定的规划和排序。而浮动框就像是天上的飞机，他是浮动在天上的，飞机完全可以从你的头顶上飞过去。 额，例子举得不太好，你能理解吗？浮动框就是在位于网页之上，可以飞来飞去，不受网页本身的文本流的控制。

首先，看我们文本的普通流，他是一种楼层结构。只要你属于普通流，就必须遵守。块元素必须是垂直排列的，比如div.

而浮动就是让这些楼层结构的框架左右排列，如下图

以上就是浮动的作用，应该可以说，现在的网站有会有浮动的身影。 来看语法： float:left        浮动向左 float:right     浮动向右

不过浮动框也不是完全不受控制的。 比如，飞机可以飞到人的头顶上，他们互不影响。 但是飞机和飞机之间却是不能碰撞的（意会就行，别讨论更深的关于飞机的东西，小编不懂） 如图所示： 对图一而言，设置框一向左浮动，框二和框三不浮动。 所以，框2和框3位于文本流，一个上一个下， 很好理解。而框1向左浮动，所以位于框2的上方，将其覆盖。 OK，如果你要问，为什么是框1覆盖框2，而不是框2覆盖框1.那么这就要提到之前说的盒子模型。盒子模型，就好像我们从上往下看一个鞋盒子。OK，重点是从上往下看，自然看到的是上面的东西，也就是飞机喽。 再看图二,3个框都是向左浮动，所以他们都在浮动流层，脱离文本流。所以，同样位于浮动流层的他们，就必须准守浮动流层的规则，互相无法重叠，最多边框碰撞在一起，如图所示。

举个例子 <style> .perent{ width:350px; height:350px; background:#CCC;} div{width:100px; height:100px;  margin-bottom:10px; } .div1{ background:#0F6;} .div2{ background:red;} .div3{ background:blue;} </style> <div class="perent"> <div class="div1" style="float:right;"></div> <div class="div2"></div> <div class="div3"></div> 注意：绿色框1，红色框2，蓝色框3 </div> 看网页效果图