清楚浮动的3种方式

方式一：在浮动的div后面添加一个空白的div，在该空白div中设置clear：both

<div class="outer">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="clear"></div>
</div>

css:.clear{clear:both;}

方式二：为包含浮动div的父元素设置overflow,设置zoom:1;兼容IE

<div class="outer">
    <div class="div1">1</div>
    <div class="div2">2</div>
</div>

css:.outer{overflow:auto;zoom:1;}

方式三：利用：after伪类在父元素后面插入一个div,类似方法一，好处是没有在html中设置多余的空白div

<div class="outer">
    <div class="div1">1</div>
    <div class="div2">2</div>
</div>

css:.outer：after{        clear:both;        content:‘‘;        width:0;        height:0;        visibility:hidden;    }

.outer{zoom:1;}