清除浮动的几种方式

1.br元素结合clear属性清浮动

案例:

html:

<div class="div1">
    <div class="div2"></div>
    <br class="clear"/>
</div>

css:

    .div1{
        border: 5px solid green;
    }
    .div2{
        background: red;
        width: 200px;
        height: 200px;
        float: left;
    }
    .clear{clear:both;}

问题：不符合工作中：结构、样式、行为，三者分离的要求(多加了元素)。

2.after伪类 清浮动方法（现在主流方法）

案例：

html:

<div class="div1">
    <div class="div2"></div>
</div>

css:

.div1{
        border: 5px solid green;
        zoom:1;
    }
    .div1:after{
        content: "";
        clear:both;
        display: block;
    }
    .div2{
        background: red;
        width: 200px;
        height: 200px;
        float: left;
    }

注意：clear属性在块元素下才有效，所以需要设置display:block。由于ie6、7下不兼容after伪类，所以加zoom触发 IE下 haslayout，使元素根据自身内容计算宽高。

3.overflow:auto | hidden 清浮动方法

案例：

html:

<div class="div1">
    <div class="div2"></div>
</div>

css:

    .div1{
        border: 5px solid green;
        overflow: auto;
        width: 100%;
    }
    .div2{
        background: red;
        width: 200px;
        height: 200px;
        float: left;
    }

问题：需要配合 宽度 或者 zoom 兼容IE6 IE7；