浮动元素之间注释，导致多复制一个文字问题

 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">&darr;这是多出来的一只猪</div>
30         </div>
31     </body>
32 </html>

posted on 2016-03-02 18:21 hduhdc 阅读(230) 评论(0) 编辑收藏举报