关于清除浮动的问题，在上一节中，我们已验证了两种方法，可以得知，各有弊端，下面将对后两种方法详细说明，个人感觉这两种更为主流。

第三种：在浮动容器的同级添加一个含清除标签clear的容器。这是我用了很久的方法。利用一对空标签并为其定义clear样式，我一般就用<div></div>，如下添加：

<style><!–

.container {width:200px; height:auto; background:#FF0; padding:20px;}

.left, .right {background:#FFF; border:1px solid #F00; height:100px; width:90px; font-family:”微软雅黑”; line-height:90px; text-align:center;}

.left {float:left;}

.right {float:right;}

.clear {clear:both; height:0px; line-height:0px; font-size:0px; visibility:hidden;}

–></style>

<div>

<div class=”left”>左浮动块</div>

<div>右浮动块</div>

<div class=”clear”></div>

</div>

在这里，我的clear样式除了定义clear:both外，还定义了后面几个属性，是为了兼容各个浏览器，尤其是IE6。大家都知道的，div有默认的高度，这个就不多说了。这些也是在实践中慢慢摸索出来的，也吸取了不少前辈的经验。这对div标签是要添加在所有浮动块的最后面，且要与它们在同级父级容器下。

尽管这种方法也曾用得很顺手，但如各前辈所言，它的弊端是增加了无意义的结构元素。

第四种方法：使用after伪对象清除浮动。这个也是比较主流的，写法如下：

<style type=”text/css”><!–

.container {width:200px; height:auto; background:#FF0; padding:20px;}

.left, .right {background:#FFF; border:1px solid #F00; height:100px; width:90px; font-family:”微软雅黑”; line-height:90px; text-align:center;}

.left {float:left;}

.right {float:right;}

.clearfix:after {content:”.”; clear:both; display:block; height:0; visibility:hidden; }

.clearfix {zoom:1;}

–></style>

<divmso-bidi-font-weight:normal”>clearfix”>

<div class=”left”>左浮动块</div>

<div class=”right”>右浮动块</div>

</div>

在这里为伪对象设置height:0是必须的，否则该元素（即container容器）会比实际高出若干像素。另外，.clearfix {zoom:1;}是写给IE看的，原理就是触发haslayout。曾在网上看到某前辈说“zoom:1会使一些js效果失效或出问题”，这点我尚未验证过，不过应该不会是空穴来风吧。

总结：由此可见，用于清除浮动的方法是很多的（还有未在此列出的方法），针对各种情况也会各有弊端，关键就在于我们怎么去选择运用了。