float

IE6 Text Indent Bug, IE6 Doubled Float-Margin Bug. 这两个bug的解决办法是display: inline;
IE6 Expanding Box Problem. 连续英文字符（包括URL等）、过大的图片会导致浮动布局换行。解决办法是：word-wrap: break-word; overflow: hidden;. （期待Firefox 3.1, 就不用overflow: hidden了）
IE6 Italics Bug, 解决办法有点麻烦，请阅读原文. 对IE6彻底服了-.-
Clearance, 这篇文章抱怨了float的不稳定，但给出的解决方案需要js支持，感觉过了。
Quirky Percentages in IE6’s Visual Formatting Model
The 1 Pixel Rounding Error Problem, IE7下有时也会出现。
The IE6 Three Pixel Text-Jog
The IE Escaping Floats Bug, 小方块越狱了-.-

IE相关的Bugs参考资料：The weird and wonderful world of Internet Explorer. 伟大的PIE, 赞国外的同行们。

div.container { border: 1px solid #000000 }
div.left { width: 45%; float: left }
div.right { width: 45%; float: right }

浮动门Bug就这样粉墨登场了：

The left column.

The right column.

做了一个demo页面，各种解法办法都在里面，自己看^o^

~~个人推荐使用办法二：~~

#container { overflow: hidden; _zoom: 1 }

采用hidden是因为：如果没设定高宽，hidden和auto的效果一样的；如果设定了高宽，hidden则是大部分情况下的预期结果。_zoom: 1是为了兼容讨厌的ie6.

2008-11-06更新：经圆心指点，overflow: hidden用来布局容易出问题，一是用 JavaScript Popup 出来的层很可能显示不全（致命伤）；二是在某些情况下会造成双击空白处全选（没总结出规律，偶尔会出现）。此外，某些时候还会造成性能问题。

另外，用overflow清除浮动其实是一个hack, overflow本意不是用来干这个的，如果哪一天浏览器渲染引擎升级了，解决了这个“bug”，这个方法很可能就会失效。因此最好的清除浮动的办法还是PIE的方法：

.clearfix:after {
    content: "020";
    display: block;
    height: 0;
    clear: both;
}
.clearfix {
    zoom: 1;
}

针对中文网站，上面有些改进：content:"020";是放一个空白字符（小虎指出“.”在中文编码的页面有时会出问题，采用空白字符借鉴自Adobe首页）。这样，visibility:hidden;也就没必要了。

百度的小志还指出，最好将font-size: 0; line-height: 0;也加上。我和小虎讨论的结果是，这两个其实是针对ie的hack, 但实际上ie不认识:after. ie下，用zoom: 1;就已经搞定了，不需要加入其它hack.

另外，IE/Mac是老古董了，不必再考虑。

岁月如歌