前言：相信很多人都看过浮动，但是却云里雾里的，不怎么理解。今天将我理解的浮动知识整理分享一下。

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

浮动

Div属于块级元素，这个应该不用我多说吧，你要是不知道就自刎去吧。。。

对于三个并列的div，他们的样子是这样的，不管它们的长度是多少的，反正都是独占一行：

我感觉浮动和position：absolute从某种角度上讲是类似的，都是让元素脱离标准流（都是刺头啊，很有个性）。

如果我们让div2变成左浮动的，那么效果就是这样的：

可以看到，由于div2是变成了浮动元素，脱离了标准流，div3就感觉不到div2的存在，然后就跑到div1下面去了。这里我设置的div2是左浮动，如果换成右浮动就是这样的效果：

一个元素浮动是上面这样的，那么两个会是什么情况呢？我们在试一下含有两个浮动元素的情况，弄四个div，让中间两个变成浮动的：

四个元素都不浮动的时候是这样的：

中间两个元素红色和黑色左浮动后是这样的：

中间两个元素红色和黑色右浮动后是这样的：

浮动只有向左和向右，没有向上和向下，所以不能改变div的顺序！

就像上图中的红色和黑色div，它们都是浮动的，但是不会顶到最上面遮住绿色的div。并且红色div先右浮动，黑色div后右浮动，所以红色div在最右，黑色div向右浮动知道碰到浮动的红色div的边框（见引用），如果黑色div和红色div的宽度之和超过了整个宽度，则黑色div会往下移动而不是红色div（毕竟红色div是先来的嘛，先到先得）。

清除浮动

上面基本已经讲完了浮动，现在讲一下清除浮动的知识。清除浮动有四个取值：clear：none | left | right | both。

关键：clear只能作用于需要影响的元素本身，不影响其它元素。

举个栗子，比如上图，黑色div和红色div都是右浮动，并且两者宽度之和没有超过整个宽度。现在希望红色左边不允许出现浮动元素，想让黑色div滚下去，如果你在红色div里面写clear：left。会发生啥捏？并没有什么卵用！

正确的做法是：想要黑色的下去，直接在黑色div里面加上clear：right。意思是我不希望黑色div右边有浮动元素，那么黑色div被迫就需要下去喽：）

相信大家现在对浮动理解的应该差不多了，再来最后一个小栗子，提高一下姿势。

<div style="border:4px solid blue;">
    <div style="width:200px;border:4px solid red;float:left;">
        我是浮动元素1
    </div>
    <div style="width:200px;border:4px solid yellow;float:left;">
        我是浮动元素2
    </div>
</div>
<div style="border:4px solid gray;">我是页脚</div>

这段代码是如下的效果：

哎呀！不是我们想要的效果，出现了好几个问题啊。慢慢来，先解决第一个，我们先让页脚滚下去。是的，直接对页脚使用clear：left就行。我不希望左边有浮动元素，没办法，左边资历都比我老，我自己下去好了。然后就变成这个样子了：

好了，第一个问题解决了，我们来解决一下第二个问题，包围浮动元素1和浮动元素2的div怎么没有包围呢？因为浮动元素脱离了文档流，所以外面这个div不占据空间了！现在我们要让它把这两个浮动元素包围进去。有两种方法：

方法一：现在这个外围div里面只有两个浮动元素，我们添加一个空元素，让这个元素两边都不允许出现浮动元素，那么这个空元素不就下去了吗，那么外围div不就包住了嘛。

<div style="border:4px solid blue;">
    <div style="width:200px;border:4px solid red;float:left;">
        我是浮动元素1
    </div>
    <div style="width:200px;border:4px solid yellow;float:left;">
        我是浮动元素2
    </div>
   <div style="clear:both;"></div>
</div>

方法一的缺点是我们为了布局得添加很多向上面空div一样的没有意义的东西。

方法二：我们不考虑从里面入手，而直接对外围div进行操作，让它变成浮动。

<div style="border:4px solid blue;float:left">
    <div style="width:200px;border:4px solid red;float:left;">
        我是浮动元素1
    </div>
    <div style="width:200px;border:4px solid yellow;float:left;">
        我是浮动元素2
    </div>
</div>

but，它也是有缺点的，以后的元素咋办，它们不得不统一都采用浮动，然后用一些元素对浮动进行清理。