css float(1)

(1)首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流。如下图：

可以看出，即使f1的宽度很小，页面中一行可以容下f1和f2，f2也不会排在f1后边，因为div元素是独占一行的。

       浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上（类比地面与天空），和标准流不是一个层次

(2)假设上图中的f2浮动，那么它将脱离标准流，但f1、f3、f4仍然在标准流当中，所以f3会自动向上移动，占据f2的位置，重新组成一个流。如图：

从图中可以看出，由于对f2设置浮动，因此它不再属于标准流，f3自动上移顶替f2的位置，f1、f3、f4依次排列，成为一个新的流。又因为浮动是漂浮在标准流之上的，因此f2挡住了一部分f3，f3看起来变“矮”了。

       这里f2用的是左浮动(float:left;)，可以理解为漂浮起来后靠左排列，右浮动(float:right;)当然就是靠右排列。这里的靠左、靠右是说页面的左、右边缘。

(3)如果我们把f2采用右浮动，会是如下效果：

此时f2靠页面右边缘排列，不再遮挡f3，可以清晰的看到上面所讲的f1、f3、f4组成的流。

(4)目前为止我们只浮动了一个div元素，多个呢？下面我们把f2和f3都加上左浮动，效果如图：

同理，由于f2、f3浮动，它们不再属于标准流，因此f4会自动上移，与f1组成一个“新”标准流，而浮动是漂浮在标准流之上，因此f2又挡住了f4。

(5)重点：当同时对f2、f3设置浮动之后，f3会跟随在f2之后，不知道读者有没有发现，一直到现在，f2在每个例子中都是浮动的，但并没有跟随到f1之后。因此，我们可以得出一个重要结论：
       假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。

     div的顺序是HTML代码中div的顺序决定的。靠近页面边缘的一端是前，远离页面边缘的一端是后。

 (6)举几个例子：

       假如我们把f2、f3、f4都设置成左浮动，效果如下：

     根据上边的结论，跟着小菜理解一遍：先从f4开始分析，它发现上边的元素f3是浮动的，所以f4会跟随在f3之后；f3发现上边的元素f2也是浮动的，所以f3会跟随在f2之后；而f2发现上边的元素f1是标准流中的元素，因此f2的相对垂直位置不变，顶部仍然和f1元素的底部对齐。由于是左浮动，左边靠近页面边缘，所以左边是前，因此f2在最左边。

(7)假如把f2、f3、f4都设置成右浮动，效果如下：

 道理和左浮动基本一样，只不过需要注意一下前后对应关系。由于是右浮动，因此右边靠近页面边缘，所以右边是前，因此f2在最右边。

(8)假如我们把f2、f4左浮动，效果图如下：

        依然是根据结论，f2、f4浮动，脱离了标准流，因此f3将会自动上移，与f1组成标准流。f2发现上一个元素f1是标准流中的元素，因此f2相对垂直位置不变，与f1底部对齐。f4发现上一个元素f3是标准流中的元素，因此f4的顶部和f3的底部对齐，并且总是成立的，因为从图中可以看出，f3上移后，f4也跟着上移，f4总是保证自己的顶部和上一个元素f3(标准流中的元素)的底部对齐。