float布局

float相关的设置

float: none | left | right | inherit
其中 float: left | right是我们比较常用的
下面讲解几个我自己总结比较重要的关于float的知识点

1. float的定位方式

当一个元素浮动后，它会被移出正常的文档流， 然后向左或向右平移，一直平移到碰到碰到所处的容器的边框，或者碰到另外一个浮动元素。

2. float会将元素 inline-block化
对于display：block 的元素，设置float后，将取消独占一行的行为，允许别的元素对象和他一行

3. float原本是为了实现文字环绕效果
带有浮动属性的元素会脱离标准流进行排列布局， 脱离标准流后的浮动元素漂浮在正常块元素上面，但是依然占据正常文档流的文本空间，使得后面的文本以除了浮动元素之外的空间为排列基准，形成了文本环绕的效果。

4. float元素在垂直方向的排列，可以将其视为inline-block
看如下列子:

html结构

    <div class="container">     
        <div  class="item1">item1</div>
        <div  class="item2">item2 22222222222222222222</div>
        <div  class="item3">item3</div>
    </div>  

CSS结构

    *{
        margin: 0;
        padding: 0;
    }
    .container{                     
        background-color: pink;
    }
    .item1,.item3{
        float: left;
        height: 100px;
        width: 30%;
        background-color: yellow;
    }
    .item3{
        background-color: green;
    }

图中可以看到，item1排列在最左侧，item3在垂直方向上，是排列在item2的下方，水平方向上是从从右往左水平移动，直到遇到了item1的外边框。

5. 由于浮动元素会脱离文档流，导致父元素在没有设置高度以及内部没有其他子元素撑起高度时，会造成高度塌陷

6. 清除浮动

方式一

在父级结束前，添加一个子标签<div style="clear:both;"></div>

    <div class="container">     
        <div  class="item1">item1</div>
        <div  class="item2">item2 22222222222222222222</div>
        <div  class="item3">item3</div>     
        <div  style="clear: both;"></div>
    </div>

方式二

在父级css属性加上入overflow:hidden;zoom:1;或者overflow:auto;zoom:1;,该方法实际利用的是BFC的原理, zoom:1是为了兼容IE。

方式三

在父级用zoom+:after方法，原理类似于clear:both，利用CSS的:after在元素内部添加一个clear:both元素块

.clearfix{zoom:1;}    /*==for IE6/7 Maxthon2==*/
.clearfix:after {
    clear:both;
    content:'.';
    display:block;
    line-height:0; 
    visibility:hidden;
}   
/*==for FF/chrome/opera/IE8==*/        

其中clear:both;指清除所有浮动；content: ‘.’; display:block;对于FF/chrome/opera/IE8不能缺少，其中content（）可以取值也可以为空。visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清楚浮动。

方式四

给父级设置一个固定的高度。