关于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;}。使用中需注意：一、该方法中必须为须要清除浮动元素的伪对象设置height:0，不然该元素会比实际高出若干像素；二、content属性是必须的，但其值能够为空。此方法实用有效，且不用添加无心义的标签，但CSS代码较复杂，不够简洁明了。

（3）使用overflow属性

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

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