四种清除浮动方法如下：
1、使用空标签清除浮动。空标签可以是div标签，也可以是P
标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签
清除浮动，并为其定义CSS代码：clear:both。此方法的弊端在于增加了无意义的结构元
素。
对于使用额外标签清除浮动（闭合浮动元素），是W3C推荐的做法。至于使用
<br />元素还是空<div></div>可以根据自己的喜好来选（当然你也可以使用其
它块级元素）。不过要注意的是，<br />本身是有表现的，它会多出一个换行出
来，所以要设定它的heigh为0，以隐藏它的表现。所以大多数情况下使用空
<div>比较合适。
<div class="clear"></div>
2、使用overflow属性。 此方法有效地解决了通过空标签元素清除浮动而不得不增加
无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性：
overflow:auto，即可！也可以用overflow:hidden；”zoom:1″用于兼容IE6，也可以用
100%。
不过使用overflow的时候，可能会对页面表现带来影响，而且这种影响是不确定
的，你最好是能在多个浏览器上测试你的页面。
3、浮动外部元素，float-in-float。这种方法很简单，就是把“#outer”元素也进行浮动
（向左或者向右）。
但是这种方法带来的别外一个问题就是和“#outer”相邻的下一个元素会受到
“#outer”的影响位置会产生变化，所以使用这种方法一定要小心。有选择把页面
中的所有元素都浮动起来，最后使用一个适当的有意义的元素（比如页脚）进行
清理浮动，这有助于减少不必要的标记，但是过多的浮动会增加布局的难度。
4、使用after伪对象万能清除浮动。在css reset中加入一下代码，在所需要清除浮动的地方加上layout的类名即可。
#layout{*zoom:1}
#layout:after{content:'20';display:block;height:0;clear:both}
5、给父对象添加适宜高度即可。