.clearfix{*zoom:1;}
.clearfix:after{content:'\20';display:block;height:0;clear:both;}

.clear:after{content:'\20';display:block;height:0;clear:both;}
.clear{*zoom:1;} 

content:'\20'指定在浮动列表后增加一个空白字符，首先这个字符不可见，无需 visibility:hidden来隐藏（如下的样式），其次他没有高度，无 需height:0来隐藏其高度。因此这样就大大简化了原来的代码同时也达到了清除浮动的目的。

用法：
<ul class="clearfix">
<li style="float:left"><li>
<li style="float:left"><li>
<li style="float:left"><li>
</ul>

使用visibility来隐藏的方法：
.clearfix {height: 1%;} 
.clearfix:after { 
content: ".";  
display: block;  
height: 0;  
clear: both;  
visibility: hidden; 
}

CSS 中替代 <td nowrap="true"> 的设置：

table td { white-space:nowrap; }

CSS 中替代 <table cellpadding="3"> 的设置：

table td { padding:3px; }

CSS 中替代 <table cellspacing="3"> 的设置：

table { border-collapse:collapse; border-space: 3px; }

CSS 中斜体文本的设置：

font-style:italic;

CSS 中文本垂直居中的设置：

vertical-align:middle;

In this article, you’ll find 23 excellent, print-ready cheat sheets for HTML/HTML, CSS, and JavaScript (including MooTools and jQuery)."

Download here...

I have more than 20 cheat sheets and I've printed some for reading in the subway.

YAML (”Yet Another Multicolumn Layout”) 是一个 (X)HTML/CSS 框架，它为了满足弹性的和用户友好的布局而开发的。YAML自2007年出现以来就提供了广而全的文档。像许多其他的CSS-Framework如Blueprint CSS 或 YUI Grids 一样，提供了一个预定义的 CSS-classes 系统，用来创建基于网格的布局。要创建一个布局，设计师需要创建网站 HTML 结构，然后为容器（html标签）书写CSS，剩下的就自理了。

YAML 是走不同的路线，他支持基于网格的布局开发，也支持网格系统开发，但都是强调弹性都布局。如果有设计师想要创建基于网格都布局，他可以使用三列，头部和尾部的基本框架。每个元素都能够移动或者适应用户都需求。真实都设计中，列的位置是使用 CSS来定义的（在其它都 CSS 框架中使用都是 html 结构来做的）。对设计师都好处：使用 YAML 你定义类时能得到更好都选择，使用任何尺寸的单元并得到干净都代码。

基于 HTML 结构的 YAML 包括了已经防止 IE-bug 都布局都预设置。因此，它可以让设计师们更容易都创建它们都布局而不用担心新老浏览器都兼容问题。这个布局示例 (Layout examples) 提供了在 YAML 中什么是可能的一个概述，也可能会带给你们未来都设计布局的一些新的想法。除此之外，YAML 还提供来一套灵活都网格组件，你可以在列中创建列因而创建更复杂又弹性的网格布局。

相对上面都示例， BluePrint 框架也有一个使用 BluePrint 创建布局的示例页面（demo_page），它与 YAML 使用弹性都网格元素创建都模板非常都相似，这个缩放的模板甚至能在 IE5.5 下正常地工作，包括最大和最小宽度(max-width and min-width)。

除了布局设计以外，YAML 也为打印布局传递样式表，也作为水平和垂直都导航的组件。要掌握 YAML 需要一定的时间学习（攀爬学习曲线）：这个工具提供了很多不同的功能和用户友好的弹性布局，这些都不是很容易就能创建的。

然而，YAML 的概念是有很好的在线文档和PDF文档，提供一个完整的框架介绍给初学者和专业人员。你也可以通过使用 YAML-Builder 来实践，这是一个非常方便的基于 YAML 都 CSS 布局的可视化开发工具，它允许你通过拖放来创建可视化都布局，有效的 HTML 和 CSS 代码都会实时地自动生成。

• Open Source Templates
  15 impressive templates
• OSWD
  Hundreds of templates and layouts of all possible kinds.
• OSWT
  A huge collections with search- and sort-functions. With annoying advertisement.
• Maxdesign
  23 layouts and design solutions
• CSSplay
  Stu Nicolls presents dozens of free professional layouts. Sometimes a permission to use layouts is required.
• Changingman
  Beautiful liquid 3-col-layout.
• Mollio
  Seven variations of one template, incl. style guides as .pdf-files.
• Six Shooter Media
  15 Templates
• Yahoo! UI Library: Grids CSS
  A complex solution for many problems you might ever have: grid design is a principle well-known from image editors and layout tools.
• CSS Design Templates
  12 Templates
• ThreeColumnLayouts, by CSS Discuss
  Collection of 3-column-templates, gathered from a dozen of sources on the Web.
• CSS Intensivstation
  15 Layouts
• CSSFILL
  Small collection for personal web-sites
• CSS Frames Layouts
  Frames are also possible with CSS
• Ex-Designz
  98 (X)HTML-based CSS-templates
• Code-Sucks
  6 templates and various layouts with 2-4 columns.
• Jimmy Lin
  8 simple templates
• Layout Gala
  40 professional Layouts for fresh and serious online-presentations.
• Little Boxes
  16 Layouts, classic.
• Solucija
  19 Templates