岁月如歌

直接借用PPK的演示代码：

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

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

做了一个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是老古董了，不必再考虑。

这个方法很好很强大，看代码：

function println(msg) { document.write((msg ? msg : '') + '<br />'); }

var s = '名称：{name}, 数量：{num}, 描叙：{desc}';
var o = { name: 'iPhone 3G', num: '8', desc: '很好' };
var r = YAHOO.lang.substitute(s, o);
println(r); // => 名称：iPhone 3G, 数量：8, 描叙：很好

注意o.desc的值可以包含各种字符 阅读全文 »