CSS浮动（float）

网页布局第一准则：多个块级元素总想排列用标准流，多个块级元素横向排列用浮动

1，浮动

语法：

float：属性；

属性	作用
left	左侧浮动
right	右侧浮动

1.1 浮动特性

1，会脱离标准流（脱标 ）

2，会一行显示，并且元素顶部对齐

3，会具有行内块元素的特性

        任何元素加了浮动之后，都会具有行内块元素的特性

1.2  清除浮动

        原因：很多时候父盒子不适合给高度，方便元素自己撑开盒子，但是如果浮动又不占位置，父级盒子的高度会变成0，会影响下面的盒子。 

1，额外标签法：在末尾加一个块级标签，然后再清除

        选择器  {clear： 属性值；}

属性值	描述
left	清除左侧浮动
right	清除右侧浮动
both	清除两侧浮动

2，overflow，属性值设置为hidden，auto，或scroll

*{

overflow：hidden；

}

3，after

.class名:after{
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .class名{
            /* IE6,IE7  专有 */
            *zoom:1;
        }

4，父级添加双伪类元素

.clearfix::before,
        .clearfix::after {
            content: "";
            display: table;
        }

        .clearfix::after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }