关于float浮动的通俗理解

      folat浮动是我在学习CSS过程中碰到的另一个比较难以理解的问题，希望我的理解能够对大家有所帮助。

      float浮动涉及到了一个文档流的问题，所谓的文档流就是在body里面写的块元素的位置，写在上面的就先显示，后面的依次显示。如果碰到是块元素，每个块元素单独占一行，不用特殊的手段他们是不会愿意和别人同行的；而内联元素就不一样了，内联元素们喜欢挤在一起，先将一行占满，再换行。不太理解的可以看看下面的例子

1.普通的文档流定位

<div class="position" style="width:300px;  
            border:4px solid #f63;margin-bottom:20px;">  
    <div  style=" height:50px;  
            width:100px;background-color: yellow;">1  
    </div>  
    <div  style=" height:50px;  
            width:100px;background-color: bisque;">2  
    </div>  
    <div  style=" height:50px;  
            width:100px;background-color: lightblue;">3  
    </div>
    <span >我是内联元素。</span>
    <span >我是内联元素。</span>
    <span >我是内联元素。</span>
    <span >我是内联元素。</span>
    <span >我是内联元素。</span>
</div>  

div是块元素，所以每个div都单独占领一行，按照编写的顺序进行排列；span是内联元素，所以会先排满一行再换行。那如果想要块元素也能像内联元素一样排满一行呢，这就要用到我们的float浮动了，可以用逼迫的手段让它违背自己的原则。

2.右浮动

只有1右浮动时

<div class="position" style="width:300px;  
            border:4px solid black;margin-bottom:20px;">  
    <div  style=" height:50px;  
            width:100px;background-color: mediumspringgreen; float: right;">1  
    </div>  
    <div  style=" height:50px;  
            width:100px;background-color: bisque;">2  
    </div>  
    <div  style=" height:50px;  
            width:100px;background-color: lightblue;">3  
    </div>
</div>  

从上图可以看出，第一个元素被设置为靠右浮动，此时这个命令破坏了正常的文档流，也就是本来1的位子被2占领了，后面的元素依旧按照原来的规则进行排列，只有1是脱离了文档流的。

我把1的高度设置得小一点，2的宽度大一点，这样看起来更加明显，2仿佛忽略的1的存在，直接占据了1的位子，而且1浮动在2的表面时会将2遮住，这也就是脱离了正常的文档流的意思。

1，2右浮动

将1，2都设置成右浮动时，3就会占领他们原来的位子。

1，2，3右浮动

如果位置足够，123应该排在同一行，但是由于除了父元素，其他元素都设置了右浮动，即其他元素都脱离了文档流，只有父元素会按照原来没有设置时的样子放置，子元素也不能将父元素撑开，因为父元素会忽略他们，当他们不存在

但位置不够时，3就会被挤到下一行，还是会靠右边放置，如下图。

3.左浮动

左浮动和右浮动其实差不多，只要掌握了基本原理就可以理解了，即float定位的核心是，进行定位的元素会脱离文档流，被其他的元素忽略。

4.消除浮动

接下来介绍一下float定位的死党，clear属性，clear专门和float对着干。

<div class="position" style="width:300px;
            border:4px solid black;margin-bottom:20px;">  
    <div  style=" height:50px;  
            width:100px;background-color: mediumspringgreen;float: right;">1  
    </div>  
    <div  style=" height:50px;  
            width:100px;background-color: bisque;float: right; ">2  
    </div>  
    <div  style=" height:50px;  
            width:100px;background-color: lightblue;clear: right;">3  
    </div>
</div>  

给1，2都设置右浮动，3不设置任何浮动时，在3 上用消除右浮动时，会出现以下结果：

因为给3设置了消除右浮动，3就不会和有右浮动的元素相邻，它就委屈自己，下降了一格。

具体语法如下：

clear语法：
clear : none | left | right | both

取值：
none : 默认值。
left : 左侧抗浮动
right : 右侧抗浮动
both : 两侧抗浮动

这是摘自张鑫旭老师的文章里的，官方解释是元素盒子的边不能与前面的浮动元素相邻，我自己理解的是，float浮动定位会给旁边的元素造成影响，而clear消除定位只是对自己进行改变，不会影响其他的元素，有一种人畜无害的感觉。

好了，以下就是我今天的分享了，如果有不同的看法，可以来私聊我，我们可以一起讨论讨论。