本文主要介绍CSS中清除浮动float的三种方法，分别是：在浮动元素后添加clear元素、给父元素添加overflow属性、使用CSS伪类:after清除浮动。这些方法在实际开发中都有不同的应用场景，可以根据具体情况灵活选择，下面将详细介绍这三种方法。
1. 在浮动元素后添加clear元素
在CSS中，浮动元素会脱离正常布局流，造成父元素高度塌陷，因此需要使用一些方法来清除浮动。首先介绍的是在浮动元素后添加clear元素来清除浮动。
代码如下：
.clear{
clear:both;
}
在浮动元素后直接添加一个清除浮动的clear元素即可，代码如下：
<div class="parent">
<div class="float-left">左侧浮动元素</div>
<div class="float-right">右侧浮动元素</div>
<div class="clear"></div>
</div>
其中parent是父元素，float-left和float-right则是两个浮动元素，clear是用于清除浮动的元素。
这种方法的优点是简单易用，而且支持所有浏览器。但是缺点也很明显，就是需要添加一个额外的clear元素，会增加代码量，而且如果不小心添加了多余的clear元素，可能会影响布局。
2. 给父元素添加overflow属性
第二种清除浮动的方法是给父元素添加overflow属性，代码如下：
.parent{
overflow:hidden;
}
这种方法的原理是父元素添加overflow属性后会形成BFC（块级格式化上下文），从而包含浮动元素，防止浮动元素影响其他元素的布局。缺点是如果内容超出父元素高度，会被截断，而且也会对某些布局产生影响。
3. 使用CSS伪类:after清除浮动
第三种方法是使用CSS伪类:after清除浮动，代码如下：
.clearfix:after{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
zoom:1;
}
这种方法的原理是给父元素添加一个伪元素:after，通过clear:both;清除浮动，同时给伪元素设置height:0;和visibility:hidden;来避免对布局产生影响，另外也需要通过.zoom:1;来触发hasLayout，避免在IE6/7下出现问题。
这种方法的优点是不需要额外添加元素，不会对布局产生影响。缺点是代码量比较多，而且需要考虑IE6/7的兼容性问题。
综上所述，以上三种方法都是比较常见的清除浮动的方法，具体需要根据实际情况灵活选择。另外，在使用浮动布局时，也应该遵循一些规则，比如尽量减少浮动元素，不要过度依赖浮动布局，避免出现问题。