关于CSS中清除浮动的方法

在使用CSS样式时会经常使用到浮动（float），这时如果没有清除浮动就会造成很多怪异的现象，因此对父级元素清除浮动是必须要做的，这样也是书写CSS的一个良好习惯。

目前常用的方法大致有三种。

（1）使用空标签清除浮动

这是目前最常用的一种清除浮动的方法。空标签可以是div标签，也可以是P标签。其实理论上可以是任何标签。这种方法是在需要清除浮动的父级元素内部的最后添加一个清除浮动的空标签，其CSS代码：clear:both。此方法简洁明了，方便实用，但其弊端也很明显，就是增加了无意义的结构元素。此外，有一种与此相似的方法，<br clear="all"/>也可以实现同样的效果。

（2）使用after伪对象清除浮动

各浏览器均支持after伪对象，所以after应该是适用的，不存在兼容问题。其CSS代码：#layout:after{ display:block; clear:both; content:""; visibility:hidden; height:0;}。使用中需注意：1、该方法中必须为需要清除浮动元素的伪对象设置height:0，否则该元素会比实际高出若干像素；2、content属性是必须的，但其值可以为空。此方法实用有效，且不用添加无意义的标签，但CSS代码较复杂，不够简洁明了。

（3）使用overflow属性

此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性：overflow:auto;其目的是让高度自适应，zoom:1;是为了兼容IE6(zoom不符合W3C标准)，也可以用height:1%;的方式来解决。

这三种清除浮动的方法在实际应用中均实用有效，至于使用哪一种那就是仁者见仁智者见智了，本人还是习惯使用第一种方法，简单快捷无压力，而且那几个清除浮动的标签其实也无伤大雅！