##浮动的原理
css样式中的浮动（float）属性主要有none，left
和right 这三个属性值：

• float：none；设置页面中的元素对象不浮动，主要是将已经设置为浮动的元素改变为非浮动的元素

• float:left将页面中的元素对象设置为左浮动。如果多个元素同时设置了该属性，那么将会形成一个从右到左的页面布局形式

• float:right将页面中元素设置为右浮动，如果多个元素同时设置了该属性，那么将会形成一个从右到左的页面布局形式

  清除浮动的方式：

  1. 利用br标签中的clear属性清除浮动
     <div class="float_box"> <div class="float_left">左浮动元素</div> <div class="float_right">右浮动元素</div> </div> <br clear="all"/> <div class="no_float">测试因为浮动导致该容器所处的位置</div>
     （出现问题：在FF浏览器中我们看到类名为float_box的div标签已经有背景色了，在IE浏览器中并非如此）
     解决办法：
     .float_box{ background-color:#AAA; **zoom:1;** 解决IE浏览器中haslayout的问题
     }
  2. 利用cs样式中的clear属性清除浮动
     即把前面代码:
     
     改为
     
     对应css代码为：.clear_float{
     clear:both;
     }
     可能出现问题与前面一样，解决办法相同设置：zoom：1
  3. 利用css样式中的overflow属性清除浮动
     .float_box{ overflow:hidden; background:#AAA; zoom:1; }

  • overflow：visible；时，清除浮动只对IE有效
  • overflow：hidden;虽然能解决清除浮动问题，
    但可能会因为hidden的属性值将溢出的部分隐藏
  • overflow：auto

  1. 利用css样式中的display：table清除浮动
     .float_box{ display:table; background-color:#666; }
     (不推荐使用)
  2. 采用伪类：after后续控制的高度为0的为伪类层清除浮动
     .float_box:after{ clear:both;*清除伪类层以上的浮动* display:block; visibility:hidden;*设置伪类层内容为块元素且可见* height:0； line-height:0;*设置伪类层中的高度和行高为0* content:"";*将伪类层中的内容清空* }