清除浮动

清除浮动的三种方法：
1.标签清除浮动
在浮动元素后加一个空标签，空标签上定义一个清除浮动的类：
<style type="text/css">
.clear{ clear:both; height:0;overflow:hidden;}
.float_left{ float:left; }
.float_right{ float:left; }
</style>
<div class="float_left">左浮动元素</div>
<div class="float_right">右浮动元素</div>
<br class="clear"></br>
空标签法简单有效，对浏览器的兼容性也很不错，空标签也不一定限于div，也可以是其他的标签p、span、br，值得注意的是在标准浏览器下这个空标签必须是块级元素，比如在使用span的时候就得将它转换成块级元素(display:block)，在IE6/7下内联元素也可以。空标签法由于使用起来简单，受到广大新手朋友的青睐，我也时常为了省事，用这种办法。空标签法的缺点就是要多加一个额外的标签，这样HTML代码看起来就不够优雅，如果浮动元素较多，那么空标签也会很多
2.overflow
子级元素有浮动，可以给父级元素添加一个overflow:hidden或overflow:auto的CSS属性来清除浮动。
<style type="text/css">
.content{
overflow:hidden;
background:red;
}
.float_left{ float:left; }
.float_right{ float:left; }
</style>
<div class="content">
<div class="float_left">左浮动元素</div>
<div class="float_right">右浮动元素</div>
</div>
该方法可以兼容标准浏览器以及IE7+，对IE6无效。但overflow:hidden或overflow:auto属性的CSS元素如果内部有元素要定位到外面来的话就很杯具了
3.IE6/7的hasLayout

微软的IE6/7的渲染引擎都有hasLayout属性，很多兼容问题都是由此引起的，某些CSS属性触发了hasLayout也同样可以达到清除浮动的效果。结合上面提到的overflow，那么就可以实现兼容标准浏览器和IE6的清除浮动的效果。触发IE6/7的hasLayout的方法并可以用来清除浮动的方法有：

    1. 设置一个显式的高度或宽度(不能为auto)
    2. zoom:1
    3. display: inline-block (hack形式)
    4. float:left/right (hack形式)
float
子元素有浮动，给父元素也添加一个浮动(float:left)，在标准浏览器下和IE6/7/8下都有效，但是这个父级元素浮动了又得清除父级元素的浮动，所以该方法的应用场景很受限制，不推荐使用。
:after
:after是一个伪类元素，经常与content结合使用，用来给元素的后面添加内容，该方法用来清除浮动可以兼容标准浏览器和IE8，IE6/IE7无效。
<style type="text/css">
.box{
zoom:1; /*兼容IE6/7的清除浮动*/
}
/*兼容标准浏览器*/
.box:after{
content:'.'; /*具体的值与清除浮动无关，尽可能的节省字符*/
visibility:hidden;/*不可见*/
display:block; /*设置成块级元素*/
height:0; /*0高度使其不占用布局空间*/
font-size:0px;/*兼容ie6,使其不占据布局空间*/
clear:both;
}
.box{
   zoom:1;
   background:red;
   }
.float_left{ float:left;}
.float_right{ float:left;}
</style>
<div class="box">
<div class="float_left">左</div>
<div class="float_right">右</div>
</div>
5.采用display:table/display:table-cell 等table系列属性将父元素变成 table 形式自动包含浮动元素；
.box{display:table}
或者
.box{display:table-cell}
6.使用 TABLE 以及 TD 标签作为浮动元素容器；
<table>
  <tr>
     <td>
       <div style=”float:left”></div>
    </td>
  </tr>
</table>
7.采用 float:left/float:right 方式将父元素同样浮动，就可以包含浮动内容；
当元素设置 float:left/float:right 时 ，同样也创建了 CSS 2.1 规范定义的 Block Formatting Contexts。这样父容器也就包含了浮动元素高度。同时，这个样式也会在 IE 6/7 内触发 hasLayout 特性，拥有这个特性的元素也可以计算出浮动元素的高度，使父元素包含他们。
实际问题：
虽然这种方式并没有兼容问题，但实际使用中并不推荐。因为很容易推断出，页面中只要有一个浮动元素，使用该方法清理浮动将不可避免的使页面所有元素都浮动才可以达到预期效果。