注释的时候出现的一个bug

      当多个浮动的元素彼此跟随，中间加注释的时候，最后一个浮动元素内的文本偶尔会复制到最下面去。
学名Duplicate Characters Bug

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >  
< html  xmlns ="//www.w3.org/1999/xhtml" >  
< head >  
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />  
< title > 多了一只猪 </ title >  
</ head >  
< body >  
< div  style ="width:400px" >  
< div  style ="float:left" ></ div >  
<!--注释内容 -->  
< div  style ="float:right;width:400px" > ↓这就是多出来的那只猪 </ div >  
</ div >  
</ body >  
</ html >

解决方法
1、不放置注释。最简单、最快捷的解决方法
2、注释不要放置于2个浮动的区块之间。
3、将文字区块包含在新的<div></div>之间，如：<div style="float:right;width:400px"><div>↓这就是多出来的那只猪</div></div>。
4、去除文字区块的固定宽度，与3有相似之处。
5、有的人在猪后加一个<br />或者空格，但只是消除现象。
6、不要给浮动元素设置多宽度，使其不会到达包含元素的底部，或者对最后一个元素设置margin-right: -3px;或者更小。 7、注释可以这样写：<!--[if !IE]>Put your commentary in here...<![endif]-->

转载于:https://www.cnblogs.com/huashengjam/archive/2009/07/21/1527679.html