清除浮动

clear:both;

--------------------

当浮动对父元素有影响时(父容器装不下子元素)，清除浮动的方法：

1.额外标签法：

  这种方法应该说是最简单的一种了，W3C建议在窗口的末尾增加一个clear:both的

  元素，强迫容器适应它的高度以便装下所有的float元素，如：

  <div id="main">

<div id="left">左盒子</div>

<div id="right">右盒子</div>

<div class="clear"></div> //增加一个空div

  </div>

  空div的类clear为：

.clear{clear:both;}

2.溢出overflow的使用

  overflow的功能：设置当对象的内容超过其指定高度及宽度时如何管理内容

  overflow:visible/auto/hidden/scroll

 visible：默认值。不剪切内容也不添加滚动条。

 auto:在必需时对象内容才会被裁切或显示滚动条。

 hidden：不显示超过对象尺寸的内容。

 scroll：总是显示滚动条。

  用此方法清除浮动，将值设置为hidden。

  但是如果子元素使用了定位布局，就会很难实现。

3.利用伪对象after方法

  定义一个类，使用伪对象after，控制浮动元素的影响。

  网上最流行的清除浮动代码：

  .clearFix:after{

clear:both;

display:block;

visibility:hidden;

height:0;

line-height:0;

content:".";

   }

   .clearFix{zoom:1;} //解决IE6、IE7兼容问题。只有IE内核支持缩放