清除浮动的几种方法

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;
}