方法一（使用空标签带clear属性）
在浮动元素后使用一个空元素如<div class="clear"></div>，
并在CSS中赋予.clear{clear:both;}属性即可清理浮动。
在浮动元素下加<div class="clear"></div>
.clear{ height:0px;font-size:0;clear:both;}但是在ie6下，块元素有最小高度，即当height<19px时，默认为19px，
解决方法：font-size:0;或overflow:hidden;
方法二（给浮动元素的父元素添加overflow属性）overflow:auto（zoom:1）注意，zoom不符合W3C标准。overflow:hidden也可以实现。
方法三：（给浮动的元素的容器添加浮动）
<!--为父级添加float来清楚浮动-->
给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。
方法四： （使用after伪对象清除浮动）
after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，
通过after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。
通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格""或点"."，并且赋予clear属性来清除浮动。需要注意的是为了IE6和IE7浏览器，要给clearfix这个class添加一条zoom:1;触发haslayout。
after伪对象非IE浏览器支持，所以并不影响到IE/WIN浏览器。具体写法可参照以下示例。使用中需注意以下几点。
一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；
二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为"."，
方法五：使用邻接元素处理
给浮动元素后面的元素添加clear属性。
方法与添加一个空标签类似，只是此处用浮动元素紧邻的元素