清除浮动的几种方法

1、使用空标签清除浮动。

<div style="background: grey;border: 1px solid gold; ">
    <div style="float: left; background:#cccccc; line-height:100px;">left</div>
    <div style="float: right; background:#cccccc; line-height:200px;">right</div>
    <div style="clear:both"></div>
</div>
2、使用overflow属性。 此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。
使用该方法是只需在需要清除浮动的元素中定义CSS属性：overflow:auto，即可！也可以用overflow:hidden；”zoom:1″

<div style="background: grey;border: 1px solid gold; overflow: hidden; zoom:1;">
    <div style="float: left; background:#cccccc; line-height:100px;">left</div>
    <div style="float: right; background:#cccccc; line-height:200px;">right</div>
</div>
3、使用after伪对象清除浮动。 该方法只适用于非IE浏览器 。

 　　<style>
        .text{
            background: grey;
            border: 1px solid gold;
        }
        .text:after{
            display:block;
            clear:both;
　　　　　　　content:"";
            visibility:hidden;
            height:0;
        }
    </style>
<div class="text">
    <div style="float: left; background:#cccccc; line-height:100px;">left</div>
    <div style="float: right; background:#cccccc; line-height:200px;">right</div>
</div>


建议使用第三种方法