本文可以说是有别于目前绝大多数关于浮动的文章，我没有讲浮动的使用实例啊之类的东西，也没有去分析浮动的一些特性，仅仅从最根本的地方分析浮动，我想这个比单纯的讲解几个浮动的应用作用更深远。而且还有一点，本文其实某种程度上是批判浮动的，希望开发者尽可能的少使用浮动，少使用浮动去做些其实并不是浮动应该做的事情。
本文内容多理论，着重表达了我个人的观点，即目前大多数的float应该都不是浮动本应完成的工作，其中使用了大量深入的研究证明自己的观点，相信对您对浮动的认识一定大有帮助。
“CSS相关”目录存档
CSS float浮动的深入研究、详解及拓展(二)
2010年01月22日，星期五CSS float浮动的深入研究、详解及拓展(一)
2010年01月21日，星期四保证是您没有见过的对浮动的原理本质研究最透彻的文章，没有之一。浮动专题内容较多，本篇是第一部分，重点分析了浮动的意义，深入研究了浮动显示的原理。本文内容较深，概念抽象，适合于一定CSS基础的人阅读，我尽量将我想表达的内容表述清楚，提供详尽的插图，必要的动画演示。多是个人观点，如有异议欢迎反驳。
CSS3 animate实现图片墙3D翻转效果
2010年01月12日，星期二本文主要就是展示了一个用纯CSS实现的图片墙动画3D翻转效果，有图片演示，有视频演示，有demo页面，提供简单的代码分析和原理讲解。目前而言仅chrome浏览器和Safari浏览器下有效果，所以，本文主要在于展示CSS3的一些特性以及潜能。希望对有兴趣的朋友有所帮助。
页面可用性之outline轮廓外框的一些研究
2010年01月4日，星期一在IE以及Firefox浏览器下，默认情况下，点击链接文字或图片（特指a标签下的）。会留下一个轮廓框。就我个人而言，对于链接点击后留下的轮廓框，我都是采取无视的态度，因为权衡来讲，对链接轮廓框大动干戈麻烦大于好处。但是网站千差万别，总有需要解决这类虚框的时候。
目前网上或设计师工程师常用的方法就是设置…，此方法确实有效，或是由于跟风，或是由于没有深入思考，或是根本没有必要想那么多，此方法会大大降低页面的可用性…
CSS3 transition实现超酷图片墙动画效果
2009年12月30日，星期三
CSS3是个新东西，也是个好东西，不过以往用CSS并没有让自己兴奋。比如圆角，文字投影等就的CSS也可以实现，就是多一些标签而已。但是，今天，对CSS3 transition过渡的学习真正让我兴奋了一把。因为我见到了我以前没有见到过的东西，简单的几行CSS代码实现了flash都不容易实现的炫酷效果。本文就将展示一下使用CSS3 transition实现的炫酷图片墙图片旋转悬浮效果，文章由浅入深，循序渐进，提供详尽的代码讲解以及相应的demo实例页面，相信会对您了解CSS3的一些特性有所帮助的。
IE6下z-index犯癫不起作用bug的初步研究
2009年12月24日，星期四CSS中，z-index是个内容繁多，牵连甚广的知识点，CSS手册中的那点知识那就是冰山一角。如果深入研究，牵涉到border及background的堆叠模型，同级显示问题，同级牵连显示问题，以及浏览器处理显示的机制等，我可能表述有些含糊，但确确实实z-index蕴含着很深的知识点。
我在z-index的研究上面的功夫还不够，所以一些深入的东西我是没有信心讲好的。不过本篇文章可以说是做了个不错的表面功夫，详细的阐述了IE6下两个常见的z-index层级bug，有理有据，一步步细致分析，提供代码演示，提供demo页面，希望对您的学习能有所帮助。
css行高line-height的一些深入理解及应用
2009年11月28日，星期六
前两天在腾讯ISD团队博客上看到一篇翻译的文章“深入理解css 行高”，是个不错的文章，学到了不少东西，颇有感觉，于是决定结合自己的一些经验与理解写篇内容互补或者说是角度不同的文章吧。
本文核心重点在于inline box模型下的line-height高度问题，希望可以纠正css中对高度的正确认识，并依次展开列举了一些常见的有关line-height的应用，提供demo页面，希望对您的学习有所帮助。
CSS实现圆角六色渐变自适应按钮详解
2009年11月21日，星期六本文将要展示如何用纯css实现2个像素的真正意义上的圆角，并且按钮带有细腻圆滑的渐变效果，其色彩丰富，可支持6种过渡色，从上往下可支配的颜色达9种。
本文将通过业余的图片、视频来演示实现的原理，将代码形象化，提供demo，希望您可以充分了解这种技术，也希望能开阔您的思维，对您的工作与学习有所帮助。
我熟知的三种三栏网页宽度自适应布局方法
2009年11月17日，星期二目前，以1024像素显示器为目标的960~1000像素的网页在占有率越来越高的宽屏下的显示有些吃力了。采用流动性布局，也就是宽度自适应布局可以有效解决这一问题。自适应问题是个很大的题目，如果深入细节，不是几篇文章可以说清的。本文就针对实现简单的三栏宽度自适应做题。简要展示了我所熟知的三种宽度自适应布局方法。全都是比较优秀，没有兼容性问题的方法。提供demo实例演示以及源文件下载。希望对您有所帮助。
告别图片—使用字符实现兼容性的圆角尖角效果beta版
2009年11月6日，星期五字符既是文字又是图片，所以很多时候我们可以使用字符代替图片实现一些貌似只有图片才能实现的效果，例如，圆角，尖角等。您就可以使用字符实现这类效果。可以优化页面，提高性能。
本文以Google gmail邮箱中字符应用为引子，讨论的字符的一些特性，与图片相比的一些优缺点。而后，以字符+css的方式展示如果使用字符实现圆角效果，如何实现尖角效果。最后拿新浪微博的对话框做实际的实例，演示如何使用字符代替图片，实现几乎同样效果的优化，以展示字符的实际应用性及潜力。
本文提供详尽细致的demo页面，提供源文件打包下载，希望本文的论述能够对您有所帮助。
我的应用
我的应用