最通俗易懂的浮动（float）布局原理

最通俗易懂的浮动（float）布局原理（图文解释）

写在前面的话：

1、对于很多刚接触Css的朋友来说对float浮动布局处于一个很模糊的概念。
2、本片文章适用于学完HTML，刚接触Css盒子模型对浮动不太理解的同学。
3、本人水平有限,此文尽完整的讲解浮动的原理,有不足之处还请理解。
4、本文所有示例用div元素布局展示，方便理解。
5、如有不懂元素分类的同学可以查看我的另外一篇关于元素分类的文章。

教程开始：
一、标准流的布局是怎么样排列的？

展示如下：

可以看到，第一个div的后面是完全可以容纳下第二个div的，但是第一个div也不会排在第二个div后边，因为div元素是独占一行的。
我们要知道div是块级元素，块级元素独占一行，自上而下排列，也就是标准流。

注意：
此时我们讲的理论是基于标准流的布局排列。
我们都知道，无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素”。或者说如何把我们想移动的div盒子移动到我们相对应的地方。

显然标准流已经无法满足需求，这就要用到浮动。

浮动，顾名思义就是让元素浮起来。讲到这里就要讲一个页面的层级概念了。

举一个列子，一条河流分河底和河面，如果我们站在河面上是看不见河底的。
现在，我们把一个元素浮动起来过后，页面就会出现两层。结合我们前面讲的例子，标准流就是位于河底的元素，而浮动流就是位于河面的元素。

例如，假设上图中的div2浮动。如图：

我们可以看到，div2脱离标准流，浮动到水面层。但div1、div3、div4仍然在标准流当中，所以div3会自动向上移动，接替之前div2的位置，重新组成一个流。（再举一个列子说明为什么div3会接替div2的位置。假如一个村长升职被调走了，这么位置空了怎么办呢？总的有人来管这个村子吧，得有人来接替这个村长的位置。那么我们就可以知道，浮动的div原来之前的位置空了，就会被下面的div所接替重新组成新的标准流。）

我们现在看到的是div2的左浮动，左浮动的意思就是随着页面的左边为起始点经行排列，其实严谨的来说的话是跟随父级的左边。如果有多层盒子嵌套的话，浮动始终会跟随在父级的边缘进行排列。
如果我们把div2右浮动，效果如下图所示：

此时我们可以看到，div2靠右排列过后。我们就可以清楚的看到div1，div3，div4重新组成的标准流。
有同学就会问了，怎么浮动了，div还是没并排到一起啊。
那么现在我们把div2，div3都左浮动试一下，如下图所示：

div2，div3浮动过后都上升到了水面层并排成一排了。同理div3浮动过后，div4就会接替原来div3的位置进行补充，组成重新的标准流。
那我们把div2，div3，div4都浮动起来看下会怎么样呢？
如图：
当同时对div2、div3，div4设置浮动之后，div3会跟随在div2之后，div4会跟随在div3之后，不知道有没有细心的同学发现，一直到现在，div2在每个例子中都是浮动的，但并没有跟随到div1之后。因此，我们可以得出一个重要结论：

假如div1没有设置浮动，div1具有独占一行的属性，且浮动流的元素不能占有div1元素当前行的区域。
由此得出另外一个结论，假如div2浮动了，div1没有浮动。div2只能在当前行浮动。如果div都浮动了，后面的div都会依次跟随在上一个div的后边。（但是这里要补充一点，如果父级元素的宽度不够容纳所有的元素排成一行时，那么最后一个元素就会被挤下去到第二行重新排列，依次进行。）

为了印证这个结论。让同学们能够看的更清楚，我们来进行一下对比就很清楚了。
如图：

此时我多加了一个div5，并且都不浮动。那么我们现在把div2和div4浮动看下是什么效果。
如图：

很清楚的可以看到div1，div3，div5重新组成了标准流，div2，div4浮动了，但是由于标准流块级元素独占一行的特点，上一个元素没有设置浮动时，浮动的元素不能跟随上一个元素的后面，且元素在当前行浮动。

至此，恭喜同学已经掌握了添加浮动。

经过上边的学习，可以看出：元素浮动之前，也就是在标准流中，是竖向排列的，而浮动之后可以理解为横向排列。

本人水平有限，能够讲到的浮动原理还远远不够，希望对看到这篇文章的同学有所帮助。