浅谈css中浮动和清除浮动带来的影响
有很多时候，我们都会用到浮动，而我们有时候对浮动只是一知半解，却不是太清楚它到底是怎么回事，不知道各位有没有和我一样的感觉，只知道用它，却不知道它到底是怎么回事，所以，在学习的过程中，就要把一个概念不是很清晰的问题把它弄清楚了，便于我们以后的使用。早些时候，W3C规定出来的浮动实际并不是为了布局所用，当时是为了做文字环绕才使用到浮动，后来有人发现用它来做布局也挺不错啊，但是，用到了浮动，是要付出一定的代价的，我们就必须要处理浮动所带来的影响。接下来我们就聊聊浮动的那些事儿，此分享仅供参考，有什么不足的地方希望各位博友指正！
首先我们要知道，css中的块级元素在页面中是独占一行的，自上而下排列，也就是我们所说的流，通常我们称之为标准流，在这里我以div为例，div是块级元素，如下图。
可很清楚的看得到，div是独自占用一行的，div2和div3是不会排在div1后面，这是在标准流中的理论，但是，有些时候，我们的需求不仅仅是这样，我们想着如何在一行中显示多个div元素，所以，标准流已经不能满足我们的需求，这个时候我们就需要用到浮动，我们这样理解，浮动就是让这个div元素脱离标准流，漂浮在标准流的上面。现在，我给div2加上一个向左的浮动，给个fload：left；然后来看看会发生什么，看图吧，上效果低千言万语！
如图可以看出，黄色的div不见了，其实它并不是不见了，而是跑到了绿色盒子的下面，这个时候我们就要想到了，因为我们给了div2向左浮动，div2已经脱离了标准流，相当于它已经和黄色盒子、红色盒子不在一个层次上，所以，黄色盒子就会顶上去跑到绿色盒子的下面，占据着绿色盒子的位置，就是我们现在看到的效果。好，理解了上面的，让我们接着来，现在我给黄色盒子和绿色盒子都加上左浮动，再看看效果：
现在我们看到div2和div3都脱离的标准流，此时，div3发现div2也是浮动的，所以div3就会跟随着div2之后，而div2发现上边的元素div1是标准流中的元素，因此div2的相对垂直位置不会改变，顶部仍然和div1元素的底部对齐，由于是左浮动，所以，左边的div2在最左边。
接下来我们来看看不同的：
如果我把div2和div3都设置成右浮动的话，看图如下：
现在我们可以看到，div2和div3都漂浮到了最右边。但是有一点我们可以发现，因为是向右浮动，右边是最前，所以div2会第一个向右浮动，div3随着紧跟div后面向右浮动，这个时候就很容易的理解了，由于div1是在标准流上，它是独自占用一行的，所以div2和div3不会跑到上面去。
为了方便理解，让我们再看一个例子，如图：
现在我有四个div，现在他们分别没有浮动，都在标准流里，每个div独占一行，现在我给div2和div4分别加一个左浮动，然后给div3增加50px的宽度，便于理解，来看看效
