处理的方式根据实际的情况，一般注意注释不要放置于2个浮动的区块之间。

第一种：重复文字CSS中用了float属性,并且用了html注释<!-- 注释 -->

<div style="width:200px;">
 <div style="float:left;"></div><!-- 在IE6下数一下有多少个前 -->
 <div style="float:left;width:200px;">前前前前前</div>
 <div style="clear:both;"></div>
</div>解决方法一:在父级容器加入：display:inline;

<div style="width:200px;display:inline;">
 <div style="float:left;"></div><!-- 在IE6下数一下有多少个前 -->
 <div style="float:left;width:200px;">前前前前前</div>
 <div style="clear:both;"></div>
</div>
解决方法二:在子级容器去掉注释

<div style="width:200px;">
 <div style="float:left;"></div>
 <div style="float:left;width:200px;">前前前前前</div>
 <div style="clear:both;"></div>
</div>
解决方法三:去除父级容器宽度

<div>
 <div style="float:left;"></div><!-- 在IE6下数一下有多少个前 -->
 <div style="float:left;width:200px;">前前前前前</div>
 <div style="clear:both;"></div>
</div>
第二种：在ie6,7下会多出两个猪

<style type="text/css">
.test {
display:block;
float: left;
margin-right:2px;
}
.main {
width:200px;
}
</style>
<div class="main">
<a href="#" class="test">再谈猪的问题</a>
<a href="#" class="test">再谈猪的问题</a>
<a href="#" class="test">再谈猪的问题</a>
<a href="#" class="test">两猪两猪两猪</a>
<a href="#" style="color:#f00">↑上面就是多出的猪两个</a>
<a href="#" class="test">再谈猪的问题</a>
</div>解决方法一:用添加<br />的方法

<style type="text/css">
.test {
display:block;
float: left;
margin-right:2px;
}
.main {
width:200px;
}
</style>
<div class="main">
<a href="#" class="test">再谈猪的问题</a>
<a href="#" class="test">再谈猪的问题</a>
<a href="#" class="test">再谈猪的问题</a>
<a href="#" class="test">两猪两猪两猪</a><br />
<a href="#" style="color:#f00">↑上面就是多出的猪两个</a>
<a href="#" class="test">再谈猪的问题</a>
</div>解决方法二:清除浮动的方法

<style type="text/css">
.test {
display:block;
float: left;
margin-right:2px;
}
.main {
width:200px;
}
</style>
<div class="main">
<a href="#" class="test">再谈猪的问题</a>
<a href="#" class="test">再谈猪的问题</a>
<a href="#" class="test">再谈猪的问题</a>
<a href="#" class="test">两猪两猪两猪</a>
<a href="#" style="color:#f00;clear:both">↑上面就是多出的猪两个</a>
<a href="#" class="test">再谈猪的问题</a>
</div>解决方法三:在文字外面再套用<div></div>

<style type="text/css">
.test {
display:block;
float: left;
margin-right:2px;
}
.main {
width:200px;
}
</style>
<div class="main">
<a href="#" class="test">再谈猪的问题</a>
<a href="#" class="test">再谈猪的问题</a>
<a href="#" class="test">再谈猪的问题</a>
<a href="#" class="test">两猪两猪两猪</a>
<a href="#" style="color:#f00"><div>↑上面就是多出的猪两个</div></a>
<a href="#" class="test">再谈猪的问题</a>
</div>解决方法四:也加上浮动效果

<style type="text/css">
.test {
display:block;
float: left;
margin-right:2px;
}
.main {
width:200px;
}
</style>
<div class="main">
<a href="#" class="test">再谈猪的问题</a>
<a href="#" class="test">再谈猪的问题</a>
<a href="#" class="test">再谈猪的问题</a>
<a href="#" class="test">两猪两猪两猪</a>
<a href="#" style="color:#f00" class="test"><div>↑上面就是多出的猪两个</div></a>
<a href="#" class="test">再谈猪的问题</a>
</div>将main中的宽度设定到一定数值时也可以是正常的