清除浮动的方法

清除浮动的常见方法

在我们布局样式的时候，经常会用到float来达到我们的目的。为了使浮动后不影响其他布局，就常常需要把浮动的效果给清除。混迹前端，岂能没有一技之长。下面就传授给你清除浮动的几种方法。

1、结尾处加上空div标签：clear:both

  <style type="text/css">
    .div1{background:#000080;border:1px solid red}
    .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
    .left{float:left;width:20%;height:200px;background:#DDD}
    .right{float:right;width:30%;height:80px;background:#DDD}
    /*清除浮动代码*/
    .clearfloat{clear:both}
</style>
<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="clearfloat"></div>
</div>
<div class="div2">
    div2
</div>

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度

优点：简单、代码少、浏览器支持好、不容易出现怪问题

缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好

建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法
2、父级div定义 伪类：after 和zoom

<style>
    .left{
        float:left;
        width:200px;
        height:200px;
    }
    .right{
        float:right;
        width:200px;
        height:200px;
    }
    .clearfloat:after{
        display:block;
        clear:both;
        content:"";
        visibility:hidden;
        height:0
    }
    .clearfloat{
        zoom:1;//兼容ie6、7
    }
</style>      
  <div class='div1 clearfloat'>
      <div class="left">left</div>
      <div class="right">right</div>  
  </div>

推荐使用这种方法，可以封装到公共css或res css文件中

3、父级div定义 overflow：hihhden

  <style type="text/css">
    .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden}
    .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}
    .left{float:left;width:20%;height:200px;background:#DDD}
    .right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="div2">
    div2
</div> 

该方法不能和position配合使用，因为超出的尺寸的会被隐藏。