清除浮动的几种方法

1. 添加标签clear:both

html:

<div class='wrap'>
　　<div class='fl'></div>
　　<div class='fr'></div>
　　<div class='cl'></div>
</div>

css:

.fl{
     float:left;
         }
.fr{
     float:right;
         }
.cl{
     clear:both;
}    

2.父元素overflow:hidden

html:

<div class='wrap'>
    <div class='fl'></div>
    <div class='fr'></div>
    <div class='cl'></div>
</div>

css:

    .fl{
               float:left;
         }
         .fr{
               float:right;
         }
         .wrap{
                overflow:hidden;
         }

####3.伪元素

html:

<div class='wrap clearfix'>
    <div class='fl'></div>
    <div class='fr'></div>
</div>

css:

for modern browsers

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

.clearfix:after{
    clear:both;
}

for IE6、7

 .clearfix{
    zoom:1;
}