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

1、1.不浮动的框框智能上下移动

2.浮动的框框可以左右移动

3.框框并不是无限的左右移动，当他碰到父元素的包含框或者另一个浮动框的边框，则停止

4.浮动框已经脱离了文本的普通流。你可以理解为我们人都是生活在地球的土地上，人和人是无法站在同一个地方的，因为空间无法重叠，无论是房子也好、其他也好都要有一定的规划和排序。而浮动框就像是天上的飞机，他是浮动在天上的，飞机完全可以从你的头顶上飞过去。

额，例子举得不太好，你能理解吗？浮动框就是在位于网页之上，可以飞来飞去，不受网页本身的文本流的控制。

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

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

4、以上就是浮动的作用，应该可以说，现在的网站有会有浮动的身影。

来看语法：

float:left        浮动向左

float:right     浮动向右

5、不过浮动框也不是完全不受控制的。

比如，飞机可以飞到人的头顶上，他们互不影响。

但是飞机和飞机之间却是不能碰撞的（意会就行，别讨论更深的关于飞机的东西，小编不懂）

如图所示：

对图一而言，设置框一向左浮动，框二和框三不浮动。

所以，框2和框3位于文本流，一个上一个下， 很好理解。而框1向左浮动，所以位于框2的上方，将其覆盖。

OK，如果你要问，为什么是框1覆盖框2，而不是框2覆盖框1.那么这就要提到之前说的盒子模型。盒子模型，就好像我们从上往下看一个鞋盒子。OK，重点是从上往下看，自然看到的是上面的东西，也就是飞机喽。

再看图二,3个框都是向左浮动，所以他们都在浮动流层，脱离文本流。所以，同样位于浮动流层的他们，就必须准守浮动流层的规则，互相无法重叠，最多边框碰撞在一起，如图所示。

6、举个例子

<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>

看网页效果图