(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(标准流中的元素)的底部对齐。