浮动及清除浮动

浮动的特点：

1：脱离文档流

2：向左或向右浮动直到遇到父元素或其他浮动元素

3：会造成父元素的高度坍塌

4：浮动设计之初是为了文字环绕排版

5：浮动的元素相互贴靠

清除浮动：

用来解决父元素高度坍塌问题

1：给父元素加clearfix这个类。使用伪元素（推荐使用）

因为clearfix不支持IE6/7，所以引入了zoom以支持IE

.clearfix:after{
            display:block;
            content:'';
            clear:both;
        }
        .clearfix{
            *zoom:1;
        }

2：在浮动元素后面加空标签，并设置clear:both;（一般不用，增加页面标签，造成结构混乱）

<div class="clearfix" style="border: 5px solid black">
    <div style="width:100Px;height:100px;background-color:red;float:left"></div>
    <div style="width:100Px;height:100px;background-color:green;float:left"></div>
    <div style="clear:both"></div>  //这里是style
</div>

3：给父元素设置overflow:auto,实现BFC清除浮动

<div  style="border: 5px solid black;overflow:hidden;">
    <div style="width:100Px;height:100px;background-color:red;float:left"></div>
    <div style="width:100Px;height:100px;background-color:green;float:left"></div>
</div>