1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 .wrap{ 8 width: 400px; 9 } 10 .left{ 11 float: left; 12 } 13 .right{ 14 width: 398px; 15 float: right; 16 } 17 </style> 18 <!-- 19 两个浮动元素中间有注释或者内联元素并且和父级宽度相差不超过3px 20 解决方案： 21 1、两个浮动元素中间避免出现内联元素或者注释 22 2、与父级宽度相差3px或以上 23 --> 24 </head> 25 <body> 26 <div class="wrap"> 27 <div class="left"></div> 28 <span></span><!-- IE下文字溢出BUG --> 29 <div class="right">↓这是多出来的一只猪</div> 30 </div> 31 </body> 32 </html>