关于float属性的一些理解

float属性

每次写前端页面浮动的时候，也搞不懂程序到底是怎么执行的，经常就靠着反复尝试来实现效果，效率很低，所以就在这总结一下float属性到底是怎么运作的，遵循着哪些基本的原则。

一 简介

在CSS中，有三种方式可以脱离文档流（float，absolute，fixed），float就是其中的一种。它会使得元素漂浮起来了一样。

二 遵循的规则

既然元素漂浮了起来，那它是怎么漂的呢？
首先，我们先看这样一个特点：所谓是”漂浮“，从网页的角度看，是在Z轴上漂的。举一个例子：

现在对div3设置一个左浮，运行之后其实页面并没有发生变化，还是上图的样子，而我有一个朋友问过我，为什么div3这里虽然浮起来了，但不往上面跑（也就是跑到最顶端，覆盖div1）。这里就是对”漂浮“有一个比较想当然的误区——认为东西浮起来，也就是脱离文档流以后，会像标准流一样尽力以后是很轻的，会往左往上。而实际上浮动元素的位置，是由其它东西决定，这个我们后面会提到。

还是上面那个网页，如果我们只对div2设置左浮动，div3就会占据div2的位置（如下图）——因为div2浮起来后不再占据标准流。而在标准流中，元素还是会默认向上靠近的，所以div3就顶上来，占据了原来div2的位置。也就是说，div3的“消失”，是“藏”在了div2下方。

其次，当有多个浮动元素的时候，他们的排列遵循着怎样的规则呢？
其实总结起来简单，要浮动的元素，会去查找前一个元素（注意，这里是就是直接找前一个元素，不需要它是浮动元素），然后看这个元素的盒模型的顶边够不够放下我们将要浮动的元素，如果不够，就往下平移，直到能放下为止，然后在能放下的那条线上，我们将要浮动的元素，会尽可能得向它要浮动的方向贴近。举个例子：

这是页面原本的样子（div1左浮动，div2右浮动）

①查找上一个元素的顶边，并尝试把自己放进去（这里上一个元素就是div2,并尝试了如图的位置。而结果，很明显是放不下去的）

②向下一直平移，直到有空间可以容纳自己

③找到了能容纳自己的那条水平线，然后尽力向自己设置的浮动方向浮动（这里就是尽力向左，直到碰到边缘或其他元素）

总结

可以想象成，一个元素漂浮起来后，就会去到它应该在的位置作比较，如果该位置不能容纳，它就会就地下移”一帧“，直到可以容纳为止。然后再尽力向它设置的浮动方向左右平移。

如果有语句不通、难以理解或者错误的地方，欢迎指正，感激不尽。