让我们看看这个很简单的例子：
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title></title>
- <style type="text/css">
- * {
- margin: 0;
- padding: 0;
- }
- #body {
- margin: 0 auto;
- width: 400px;
- height: 200px;
- background: #eee;
- }
- #left {
- float: left;
- width: 100px;
- background: red;
- height: 200px;
- }
- #center {
- float: left;
- width: 200px;
- background: blue;
- height: 200px;
- }
- #right {
- float: left;
- width: 100px;
- background: green;
- height: 200px;
- }
- </style>
- </head>
- <body>
- <div id="body">
- <div id="left"></div>
- <div id="center"></div><!-- no use -->
- <div id="right"></div>
- <div style="clear: both;"></div>
- </div>
- </body>
- </html>
尝试分别在各种浏览器下运行它：
提示：你可以先修改部分代码再运行。
在大多数情况下，我们得到了正确的预期中的结果，如下图所示：
但是不要忘了神一般的IE6，OMG，发生了什么：
经过我一个像素一个像素的测量，发现当其中一个div减少3px的时候，在IE6下就能并排显示
这个数值很容易让人想到The IE6 Three Pixel Gap，但也不是这个问题，真正的原因在于那句注释，将注释去掉就能在IE6下也得到正确的结果
有时候嵌套过多时，我们为了方便地找到嵌套的首位，会比较习惯于在开始和结束的地方加上注释，这时候如果碰到float就要慎重了，我测试了将注释换行或者加上空行分隔，都不能解决此问题
再次呼吁抛弃IE6！
另外还有css和js文件的注释，最好写英文注释，当然最好的习惯是将所有文件保存为统一编码
我碰到的几次问题是utf8的html引入编码为ansi的js文件，结果由于字符集的问题导致js中的单行(即//开头的注释)中文注释不能正确断行，导致下一行本应执行的语句被注释掉，由此可以推出一个好的编码习惯，即在单行注释末尾也加分号
相关日志
ft.