清除浮动防止高度塌陷

元素使用浮动以后会脱离普通流，导致浮动溢出
这时候就需要清除浮动

• 方法一：
  在浮动元素后添加一个空元素，并且写一行CSS代码clear：both。例如<div class="clear" style="clear:both"> <div>

• 方法二：
  给浮动元素的容器添加一行CSS代码 overflow：hidden。

• 方法三：
  使用CSS3的伪元素：after。并且在CSS中添加以下代码：

  .clearfix:after{
   	content:'.';
   	display:block;
   	height:0;
   	visibility:hidden;
   	clear:both;
   	}
  

其中clearfix为浮动元素的容器的类名。
以上三种方法在IE 6、7浏览器中需要在最后一行添加*zoom:1;用来触发hasLayout才能兼容。
还有两种不常用的方法
1、为浮动元素的容器定义height，这种方法只适合高度固定的布局。
2、父元素也跟着一起浮动。不推荐使用，因为会产生新的浮动问题。