CssGaga功能特性

1. 合并import的CSS文件，开发阶段将CSS文件按模块拆分复用，发布上线后合并减少HTTP请求；
2. 优化、压缩CSS代码，减少带宽占用，加快下载速度；
3. 优化、发布CSS中使用到的图片，可以不必考虑多发、漏发图片文件的情况；
4. 自动应用CSS Sprite技术，开发阶段不用考虑图标合并，便于管理，发布后的多个图标自动合并为一个图片，并自动更新CSS代码处理背景定位；
5. 对CSS代码中使用到的图片自动加时间戳，以便在使用长Cache与更新后的图片及时生效；
6. 样式有多套配色风格时，通过CssGaga可以实现皮肤的自动化同步；
7. CSS样式、图片一键去色功能，在遇到特殊政治任务的时候，全站能迅速进行去色改版，迅速恢复；
8. 生成iOS设备所需的不同尺寸Icon文件；
9. 处理一些浏览器兼容方面的问题；

CssGaga下载和配置

运行CssGaga需要Windows操作系统、.Net Framework运行环境。

1. 下载并安装Microsoft .NET Framework 4.0
2. 下载并解压CssGaga最新版（绿色软件，不用安装）
3. 对CssGaga进行初始化配置

第一次运行CssGaga前，需要对其进行必要的配置。主要是指定CssGaga的编译目标路径、站点的基本URL。具体步骤：

打开CssGaga所在目录，复制CssGaga.exe.config.sample文件，重命名为CssGaga.exe.config。

用任意文本编辑器打开CssGaga.exe.config，默认的代码如下：

<?xml version="1.0"?>
<configuration>
  <appSettings>
    <add key="pathSource" value="E:\" />
    <add key="webSiteUrl" value="http://qzonestyle.gtimg.cn" />
    <add key="pathReport" value="/usr/local/imgcache/htdocs" />
    <add key="pathDest1Name" value="目标环境1" />
    <add key="pathDest1" value="E:\output" />
    <add key="pathReport1" value="/usr/local/imgcache/htdocs" />
    <add key="chkTemp" value="1" />
  </appSettings>
</configuration>

其中pathDest1Name、pathDest1、pathReport1三个节点为一组，代表一个编译目标，CssGaga支持多组编译目标，要增加新的编译目标，只要复制粘贴这三个节点，修改“1”为“2”及更大的数字，相同数字为一组。例如，我设定本机的一个目录为编译目标：

<add key="pathDest1Name" value="本机输出" />
<add key="pathDest1" value="D:\ofcss\style" />
<add key="pathReport1" value="/style" />

pathDest1Name代表这个目标在CssGaga界面上显示的名称，pathDest1代表这个目标的真实物理路径，pathReport1代表这个路径编译机上的地址（不使用SMB共享进行文件部署的话，这个节点设置不设置就无所谓了，可以考虑设置为你站点上该目录的相对路径）。

上面的设定表示当我在CssGaga上勾选“本机输出”时，编译后的CSS文件和图片文件会生成到D:\ofcss\style目录下。

CssGaga开发约定

根据互联网上一些优秀团队的经验以及我们自己在工作中的经验，CssGaga建议使用者在进行重构时遵循以下约定：

1. 目录结构

• 把所有的CSS文件放在同一个目录下。网页中用link标签引用的CSS文件，我们称之为CSS桥文件（CSS Bridge），真正的样式规则代码按照模块拆分存放在不同的CSS文件中，这些CSS文件以“.import.css”结尾，代表它们不能直接被页面引用，而要在桥文件中通过@import指令导入。
• 把所有的图片文件放在CSS文件所在目录下的子目录（例如img）中。
• 把所有需要进行CSS Sprite合并的图标文件放在CSS文件所在目录下的slice子目录中。
• 把所有自定义鼠标样式（.ani、.cur）放在CSS文件所在目录下的absolute子目录中。例如：

2.代码编写

• 在CSS Bridge文件中，用@import指令，把页面用到的模块css组合到一起
• 在编写需要做CSS Sprite合并的背景图片样式时，不要缩写，必须把background-image样式单独写，并且不写background-position属性（因为这些图标在开发阶段并没有合并，也就不需要定位，合并之后的background-position会由CssGaga自动生成），如果有PNG Alpha透明的图片，需要针对IE6单独做一张PNG 索引色透明图片时，可以用_background-image做Hack，CssGaga在合并时，会单独为IE6合并一张图片。
• @import指令不要嵌套使用（A import B，则B不要再import其它文件），原则上不要import其它目录的文件（CssGaga不会做合并处理）。

3. 编译发布

在重构完成后，运行CssGaga，选择开发目录（注意与生成目标路径对应，比如开发路径是E:\ofcss\dev，目标路径是E:\ofcss\output，那么E:\ofcss\dev\style\index.css就会编译到E:\ofcss\output\style\index.css），勾选需要使用的功能，选择编译目标。然后把需要发布的CSS文件拖入CssGaga的主窗口，就会自动处理并编译到目标路径（相关的图片文件自动复制），如图：

有关CssGaga更多功能介绍和使用技巧，参见：CssGaga帮助索引

相关日志

• 2011-05-26 -- 深入解析CSS样式层叠权重值
• 2011-03-20 -- 容易被误解的overflow:hidden
• 2011-03-14 -- 对《优化浏览器渲染》的补充【译】
• 2011-03-12 -- 自适应的多列图文混排改进
• 2011-03-10 -- CSS边框实现“无图化”设计【译】
• 2011-03-04 -- 在非IE浏览器中模拟zoom创建块级上下文【译】
• 2010-10-31 -- CSS技巧:如何避免IE6中的"浮动下坠"【译】
• 2010-10-30 -- webkit中BFC元素临近浮动元素时的边距bug
• 2010-10-20 -- clearfix改良及overflow:hidden详解【译】
• 2010-06-09 -- 最近的书单

我是把代码封装到自己的一个工具类KRUtils里作为类方法，使用起来也很方便。代码如下：

/* dateDiff 方法实现 */ +(NSDateComponents *) dateDiff:(NSDate *) fromDate toDate:(NSDate *) toDate
{
    NSCalendar *sysCalendar = [NSCalendar currentCalendar];
    unsigned int unitFlags = NSYearCalendarUnit | NSMonthCalendarUnit |
                              NSDayCalendarUnit | NSHourCalendarUnit |
                              NSMinuteCalendarUnit | NSSecondCalendarUnit;
    NSDateComponents *compInfo = [sysCalendar components:unitFlags
                                              fromDate:fromDate
                                              toDate:toDate
                                              options:0];
    return compInfo;
}

/* dateDiff 调用示例 */ -(void) demo
{
    NSDate *date1 = [[NSDate alloc] init];
    NSDate *date2 = [[NSDate alloc] initWithTimeIntervalSinceNow:86400];

    NSDateComponents *diffInfo =[KRUtils dateDiff:date1 toDate:date2];
    NSLog(@"相差 %d天%02d小时%02d分钟%02d秒", [diffInfo day],
                                              [diffInfo hour],
                                              [diffInfo minute],
                                              [diffInfo second]);
    //输出结果：“相差 1天00小时00分钟00秒” }

随机推荐

• 2006-03-23 -- 动易2006版对DPO接口支持细节
• 2006-02-01 -- 好人的枷锁——评《求求你表扬我》
• 2009-10-08 -- 吃烧烤囧事
• 2007-01-28 -- 讨厌开会
• 2006-05-15 -- 两个身份证号终于合并成一个了
• 2006-06-04 -- 狼牙山
• 2011-03-20 -- 容易被误解的overflow:hidden
• 2007-11-12 -- 基金们，你们是否还记得自己是基金
• 2011-06-28 -- 腾讯ISUX招聘：前端工程师（深圳总部）
• 2005-12-06 -- 农行业务奇遇

根据CSS规范，具体性越明确的样式规则，权重值越高。计算权重值的依据，并不是许多文章所描述的那样“class是10，标签是1，ID是100”之类——虽然这样在大多数情况下能够得到正确的结果。

选择器权重值的计算

A：如果规则是写在标签的style属性中（内联样式），则A=1，否则，A=0. 对于内联样式，由于没有选择器，所以B、C、D的值都为0，即A=1, B=0, C=0, D=0（简写为1,0,0,0，下同）。

B：计算该选择器中ID的数量。（例如，#header 这样的选择器，计算为0, 1, 0, 0）。

C：计算该选择器中伪类及其它属性的数量（包括class、属性选择器等，不包括伪元素）。 （例如， .logo[id='site-logo'] 这样的选择器，计算为0, 0, 2, 0）。

D：计算该选择器中伪元素及标签的数量。（例如，p:first-letter 这样的选择器，计算为0, 0, 0, 2）。

CSS2规范中给出的一些例子：

*             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */

li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */

li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */

ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */

ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */

h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */

ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */

li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */

#x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */

style=”"          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

根据这样的定义，所以很多文章简单地把规则归纳为：内联样式的权重值是1000，ID选择器的权重值是100，class选择器的权重值是10，标签选择器的权重值是1. 整条规则中的所有选择器权重值相加得到整个样式规则的权重值，数字越大权重值越高。

大多数情况下，按照这样的理解得出的结论没有问题，但是遇到下面这样的情况就出现问题了：

样式一：body header div nav ul li div p a span em {color: red}

样式二：.count {color: blue}

按照错误的计算方法，样式一的权重值是11，样式二的权重值是10，如果这两条规则用于同一个元素，则该元素应该是红色。实际结果却是蓝色。

权重值的比较

按照四组计算的正确方法，上面例子中的样式一权重值应该是0, 0, 0, 11，样式二的权重值是0, 0, 1, 0。

根据规范，计算权重值时，A,B,C,D四组值，从左到右，分组比较，如果A相同，比较B，如果B相同，比较C，如果C相同，比较D，如果D相同，后定义的优先。

样式二和样式一的A、B相同，而样式二的C大于样式一，所以，不管D的值如何，样式二权重值都大于样式一。这就是正确的答案。

特殊的 !important

在按照ABCD四组计算比较之外，在定义样式的时候，还可以对某一个属性应用 !important。对于一直从事编程而没做过重构的人，需要特别注意的是这里的“!”与其在编程语言中的意义刚好相反，不是代表“不重要”而是代表“很重要”。

CSS2规范中规定：!important 用于单独指定某条样式中的单个属性。对于被指定的属性，有 !important 指定的权重值大于所有未用 !important 指定的规则。

例如：

样式一： #header nav ul li.current {color: red; font-weight: bold;}

样式二： li:hover {color: blue !important; font-weight: normal;}

就整条规则而言，样式一的权重值为 0, 1, 1, 3，而样式二的权重值仅为0, 0, 0, 2。所以应用于相同元素时，应该样式一生效。但是对于color这个属性，由于在样式二中用 !important 做了指定，因此color将应用样式二的规则。而font-weight则按照规定用样式一的规则。

如果多条规则中都对同一个属性指定了 !important 呢？这时候 !important 的作用相互抵销，依然按照ABCD四组计算比较。

因此 !important 的作用只有在具有唯一性时才能提现，但是我们永远无法预料自己什么时候又需要覆盖一个已经指定了 !important 的属性，所以最好的办法就是：不要使用 !important。

总结

1. 一条样式规则的整体权重值包含四个独立的部分：[A, B, C, D];
2. A表示内联样式，只有1或者0两个值；
3. B表示规则中ID的数量；
4. C表示规则中除了ID、标签和伪元素以外的其它选择器数量；
5. D表示规则中标签和伪元素的数量；
6. 比较时从高位到低位（从A到D）分别比较，高位相同才需要比较低位；
7. 有 !important 标记的属性权重值无视没用 !important 指定的一切情况；
8. 多次指定 !important 时，相互抵销。

相关日志

• 2012-03-22 -- CssGaga 快速上手指南
• 2011-03-20 -- 容易被误解的overflow:hidden
• 2011-03-14 -- 对《优化浏览器渲染》的补充【译】
• 2011-03-12 -- 自适应的多列图文混排改进
• 2011-03-10 -- CSS边框实现“无图化”设计【译】
• 2011-03-04 -- 在非IE浏览器中模拟zoom创建块级上下文【译】
• 2010-10-31 -- CSS技巧:如何避免IE6中的"浮动下坠"【译】
• 2010-10-30 -- webkit中BFC元素临近浮动元素时的边距bug
• 2010-10-20 -- clearfix改良及overflow:hidden详解【译】
• 2010-06-09 -- 最近的书单

overflow:hidden并不隐藏所有溢出的子元素

对于overflow:hidden的最大误解时：当一个具有高度和宽度中至少一项的容器应用了overflow:hidden时，其内部的任何溢出的内容都将被剪裁（隐藏）。 但事实确实如此吗？答案是“未必”！事实是拥有overflow:hidden样式的块元素内部的元素溢出并不总是被隐藏，具体来说，需要同时满足以下条件：

1. 拥有overflow:hidden样式的块元素不具有position:relative和position:absolute样式；
2. 内部溢出的元素是通过position:absolute绝对定位；

如果你只关心结论，那么记住这两点就够了。我这里有个demo，结构如下：

<div class="position">
    <h2>position box</h2>
    <div class="overflow">
        <h3>overflow box</h3>
        <div class="static">
            <p>This is static child element. This is static child element. This is static child element. This is static child element.<p>
            <p>This is static child element. This is static child element. This is static child element. This is static child element.<p>
        </div>
        <div class="absolute">This is absolute child element. This is absolute child element. This is absolute child element. This is absolute child element.</div>
    </div>
</div>

我简单截几个图给懒得打开demo的童鞋看一下：

在demo中，你可以看到绝对定位的元素被定位到了overflow:hidden的父元素之外，但是它依然被显示了。而普通元素在水平方向上的溢出被隐藏，垂直方向上撑开父元素。也就是说，普通元素的表现符合我们的预期，而绝对定位元素并不如很多人想当然的那样被隐藏。

理论依据

那么，这个原理到底是什么呢？当然是css2.1规范。在规范中关于overflow的描述中我们可以找到这样一段话：

This property specifies whether content of a block container element is clipped when it overflows the element’s box. It affects the clipping of all of the element’s content except any descendant elements (and their respective content and descendants) whose containing block is the viewport or an ancestor of the element.

简单翻译一下：此属性(overflow)规定，当一个块元素容器的内容溢出元素的盒模型边界时是否对其进行剪裁。它（此属性）影响被应用元素的所有内容的剪裁。但如果后代元素的包含块是整个视区（通常指浏览器内容可视区域，可以理解为body元素）或者是该容器（定义了overflow的元素）的父级元素时，则不受影响。

即使是我重新整理过的语言，还是感觉有点绕。不过在这段话里，出现了一个重要的名词“包含块”（containing block）。包含块是什么呢？这个大家其实比较熟悉，一个绝对定位的元素，其包含块是最近的拥有relative或者absolute定位属性的祖先元素，如果任何一级祖先元素都不符合，则其包含块是body元素。

这就说明，一个绝对定位的元素是否被overflow:hidden隐藏，要看其包含块相对于overflow:hidden的位置来决定。这就好比驻日美军，他们不受日本的法律约束而受美国军法约束。因为他们的“包含块”是美国军方而不是日本法院。

实际上在css2.1规范的11.1节，还有更明确的说明：

A descendant box is positioned absolutely, partly outside the box. Such boxes are not always clipped by the overflow property on their ancestors; specifically, they are not clipped by the overflow of any ancestor between themselves and their containing block。

翻译：

一个绝对定位的后代块元素，部分位于容器之外。这样的元素是否剪裁并不总是取决于定义了overflow属性的祖先容器；尤其是不会被位于他们自身和他们的包含块之间的祖先容器的overflow属性剪裁。

回到我的demo，overflow的元素位于相对定位的元素与绝对定位元素之间，因此根据规定它不能剪裁绝对定位的子元素。也就是说爷爷相对定位，老爸规定溢出隐藏，可是儿子是绝对定位元素。这时候儿子是否隐藏由爷爷决定，而不是老爸。

应用场景

明白了这个理论，对我们的工作有什么指导意义呢？

首先，我们知道overflow:hidden并不是万能的，要想彻底剪裁它的所有子元素，它不但要有overflow:hidden，而且还要作为所有子元素的包含块。这样万一某一天你看到overflow:hidden里面的东东居然被显示出来了，你才知道是为什么。

其次，如果我们先定义了overflow:hidden防止容器被撑开，或者用这个方法做了神马图文混排、清除浮动之类的处理，甚至是用了overflow:hidden来实现块级上下文这样上流的东东，突然产品又说里面的一个浮层要显示，要在右边，要在右上角，要在左边两个栏宽外面……那么你就知道要怎么搞了。

在oocss中，对模块的定义充分利用了这个特性。oocss的模块基本结构如下：

<div class="mod">
    <div class="inner">
        <div class="hd"></div>
        <div class="bd"></div>
        <div class="ft"></div>
    </div>
</div>

他们就对inner应用了position:relative，对bd应用了overflow:hidden和_zoom:1。有兴趣的童靴可以研究一下。

相关日志

• 2011-03-12 -- 自适应的多列图文混排改进
• 2011-03-10 -- CSS边框实现“无图化”设计【译】
• 2012-03-30 -- 禁用Firefox自带的元素查看工具
• 2012-03-22 -- CssGaga 快速上手指南
• 2011-05-26 -- 深入解析CSS样式层叠权重值
• 2011-03-14 -- 对《优化浏览器渲染》的补充【译】
• 2011-03-07 -- IE8/9兼容性设置
• 2011-03-04 -- 在非IE浏览器中模拟zoom创建块级上下文【译】
• 2010-10-31 -- CSS技巧:如何避免IE6中的"浮动下坠"【译】
• 2010-10-30 -- webkit中BFC元素临近浮动元素时的边距bug

google这篇文章关注的是资源被下载到客户端以后，在浏览器加载、解释、渲染HTML、CSS和JavaScript阶段的性能优化，提出了5个要点：

1. 使用高效率的CSS选择器
2. 避免CSS expressions
3. 将样式表放在页面顶部
4. 指定图像尺寸
5. 尽早指定文档的字符编码

前四点大布同学已经翻译过了，没拜读过的同学可以点击上面的链接到涛哥的博客学习，第五点的翻译如下：

概述

为HTML文档尽早指定字符编码，可以让浏览器立刻开始执行脚本。

细节

HTML文档是作为带有字符编码信息的字节流序列在互联网中传送的。字符编码信息可以在随文档发送的HTTP响应头信息中指定，也可以在文档的HTML标签中指定。浏览器根据字符编码信息将字节流转换为显示在浏览器上的字符。如果不知道如何构造一个页面的字符，浏览器自然也不能正确地渲染页面。绝大部分浏览器在开始执行任何JavaScript代码或者绘制页面之前都要缓冲一定数量的字节流，缓冲的同时它们也要查找相关的字符编码设定（一个值得注意的例外是IE6/7/8）。

不同浏览器需要缓冲的字节流数量不同，另外如果找不到编码设定，各浏览器默认的编码也不同。但是不管哪一种浏览器，如果在已经缓冲了足够的字节流、开始渲染页面之后才发现指定的编码设定与其默认值不同，都会导致重新解析文档并重绘页面。如果编码的变化影响到了外部资源（例如css\js\media），浏览器甚至会重新对资源进行请求。

为了避免这些延迟，对任何超过1k（精确地说是1024字节，这是我们测试过的所有浏览器的最大缓冲限制）的HTML文档，要尽早指定字符编码。

建议

通过HTTP头信息或meta标签指定编码

为HTML文档指定编码设定有几种方式：

服务器端：通过web服务器的配置来指定编码参数，为所有text/html类型的文档指定带有正确编码信息的Content-Type头信息。例如 Content-Type: text/html;charset=UTF-8

客户端：在HTML代码中包含http-equiv="content-type"的meta标签，并指定字符编码。例如 。

如果可能的话，为你的web服务器做指定字符编码的HTTP头信息配置。某些浏览器（例如Firefox）在执行JavaScript之前会用（比其它浏览器）更短的延迟缓冲来检查头信息中是否指定字符编码。这意味着它们可以跳过对HTML标签的检查，缩短缓冲的字节数和延迟时间。

把meta标签放在head区域的最前面

如果你不能对web服务器配置进行修改，又需要通过meta标签指定编码，要确保你用于指定编码的meta标签是文档中head标签的第一个子元素。浏览器会在文档的前1024字节中寻找字符编码参数，因此为了避免性能损耗，编码参数在文档头部越早出现越好（译注：在IE6以下的版本中，特定情况下，如果该meta标签不是head的第一个子元素，则会被忽略。具体触发情况尚未进行仔细测试，初步估计是与web服务器配置的默认编码或浏览器默认编码有关）。

始终指定文档类型

在浏览器开始检查字符编码设定前，它们必须先检测将被处理的文档是什么类型。如果没有在头信息或meta标签中指定文档类型（content-type），浏览器就会通过很复杂的算法去“嗅探”文档的类型。这个过程会造成额外的延迟，而且还会带来安全漏洞。

务必指定正确的字符编码

你在HTTP头信息或meta标签中指定的字符编码设置一定要和编辑HTML文档时的实际字符编码一致，这非常重要。另外，如果同时通过HTTP头信息和Meta标签两种方式指定了字符编码，它们一定要保持一致。否则浏览器发现两者相互矛盾，会造成页面渲染错误或者为了重绘页面而造成额外的延迟。有关这一点，你可以阅读HTML 4.01规范（英文）中的5.2节：字符编码（英文）。

扩展阅读

如果需要进一步了解content-type以及字符编码设定存在/缺少的不同情况下浏览器行为的细节，可以参阅以下资料（英文）：

• Page Speed wiki
• Browser Performance Issues with Charsets
• Performance Implications of "charset"

相关日志

• 2010-06-09 -- 最近的书单
• 2009-06-22 -- Whatever:hover – 无需javascript让IE支持丰富伪类
• 2011-03-10 -- CSS边框实现“无图化”设计【译】
• 2010-10-31 -- CSS技巧:如何避免IE6中的"浮动下坠"【译】
• 2010-10-22 -- HTML验证的价值探讨【译】
• 2010-10-20 -- clearfix改良及overflow:hidden详解【译】
• 2009-12-21 -- 前台开发从头说起：理解css盒模型
• 2009-12-16 -- 前台开发从头说起：谈谈CSS选择符
• 2009-12-15 -- 前台开发从头说起：关于web标准化
• 2009-04-13 -- 简单、通用的JQuery Tab实现

开始之前，首先来看一下我们的需求：

1. 一个通用的结构，可以放在不同宽度的布局列中；
2. 该结构基本构成为左图（头像）右文（多种结构），左右宽度均不固定；
3. 左栏宽度由内容最小宽度确定，右栏无论内容多少要占满容器剩余宽度；
4. 右栏可能有定位元素超出自身范围，要予以显示，且右栏的内容不能环绕左栏；
5. 右栏中可能会再包含浮动，因此右栏需要清除自身内容的浮动。

实际上针对类似需求，网上也有不少方案，建议参考阅读这篇长文以及涛哥简练实用的自适应的图文混排。根据需求，我们能确定出最基本的结构：

<div class="img-txt">
    <div class="img">左图</div>
    <div class="txt">右文</div>
</div>

安装两列布局的传统做法，我们可以想到两列都浮动、左栏浮动+右栏左边距以及负边距等很多方案。但是再对比一下需求，右栏的特性否决了两栏都浮动的方式，左栏的宽度不固定否定了负边距的方式。左栏浮动加右栏左边距将会遭遇webkit核心浏览器的BFC元素边距bug。

所以我们只能选择左栏浮动（浮动元素宽度最小，内容可以撑开），右栏不浮动（不浮动的block元素默认占满行宽）。但是不浮动的右栏既不能环绕左栏，又不能加左边距。怎么办？理所当然的就该想到BFC元素了。涛哥的方案就是这样出来的。我们在腾讯朋友的项目中已经非常大量地实践了这种方案，效果不错。该方案的核心是右栏通过overflow:hidden来创建一个块级上下文（Block Formatting Context），这样同时满足了右栏宽高自适应和不环绕左栏两个需求，我的方案也是在此之上的一个改进。

既然已经有了经过实践验证的方案，为什么要改进呢？因为我们在实践中也遇到了一些麻烦，那就是右栏中的复杂内容，复杂到会有溢出容器的浮层。但是overflow:hidden的存在迫使我们必须把右栏里的定位元素放到右栏结构之外。虽然能解决问题，但是结构上就不符合逻辑了。

所以我们的需求可以抽象为两点：一、创建块级上下文；二、不能使用overflow:hidden。前几天我翻译了一篇文章在非IE浏览器中模拟zoom创建块级上下文，恰好解决了这个矛盾——在IE中用zoom创建块级上下文，在其它浏览器中模拟IE的zoom创建块级上下文。

回到我们的结构中来说：

• img-txt要清除浮动（否则当右栏高度小于左栏时，img-txt的高度撑不开），关于清除浮动的方式，之前已经给出了改进的方案。
• img要左浮动，img和txt之间的距离只能加在img上（原因之前说了，webkit的bug）。
• txt要创建BFC，要清除浮动（这两个问题在模拟zoom的时候一并解决了）。

有了这些前提，我的方案得来全不费功夫。首先是img-txt容器清除浮动：

.img-txt:before,
.img-txt:after {
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
.img-txt:after {clear: both;}
.img-txt {zoom: 1;} 

然后是img的左浮动加右边距（注意IE6的3像素文本慢移bug）：

.img {
    float:left;
    margin-right:10px;
    _margin-right:7px;
} 

然后，txt创建BFC，同时清除自身子元素的浮动：

.txt {
    display:table-cell;
    #zoom:1;
}
.txt:after {
    clear: both;
    display: block;
    visibility: hidden;
    overflow: hidden;
    height: 0 !important;
    line-height: 0;
    font-size: xx-large;
    content: " x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";
}

行了。现在这个结构就可以搬到网页上的任意地方去，右栏内部喜欢放文字也好、图文并茂也好、有浮动也好、有定位也好，都能胜任了。现在如果你再看一下示例页面，你应该会更容易理解这些例子了。

感谢涛哥，推荐了如此精彩的几篇文章让我翻译。

相关日志

• 2011-03-20 -- 容易被误解的overflow:hidden
• 2011-03-10 -- CSS边框实现“无图化”设计【译】
• 2010-10-30 -- webkit中BFC元素临近浮动元素时的边距bug
• 2010-10-20 -- clearfix改良及overflow:hidden详解【译】
• 2009-12-21 -- 前台开发从头说起：理解css盒模型
• 2009-12-16 -- 前台开发从头说起：谈谈CSS选择符
• 2009-12-15 -- 前台开发从头说起：关于web标准化
• 2009-06-22 -- Whatever:hover – 无需javascript让IE支持丰富伪类
• 2009-04-16 -- 来自微软站点的纯CSS下拉菜单
• 2009-04-13 -- 简单、通用的JQuery Tab实现

译文：http://ofcss.com/?p=1078

作者：Thierry Koblentz （雅虎前端工程师）

用css边框实现小三角的技巧现在已经被越来越多的网站所采用，减少图片、减少HTTP请求的低碳设计越来越受欢迎。这次，来自雅虎的前端工程师又给我们带来了一组新的CSS边框设计技巧，原文列出了三种（双色背景导航条、水平排列元素间的点线分隔符、带左右箭头的垂直导航条），实际上除了这三种外，其范例页中还给出了额外的两种（水平分页导航条、垂直分组导航条）。以下是译文：

双色背景

原文并未直接给出IE6/7的处理说明，但是在范例页的样式中包含了IE6/7的Hack，这里我把它们摘出来放在下方，你也可以狠狠点击原文范例页面自行查看。

#menuBar-A {
    display: inline-block;
    text-align: center;
    border: 1px solid #cecece;
}
.child {
    display: inline-block;
    line-height: 0;
    height: 0;
    border-top: 1em solid #ffc;
    border-bottom: 1em solid #fdcf46;
    padding: 0 .6em;
    vertical-align: bottom;
}

<ul id="menuBar-A">
    <li><a href="#">About Us</a></li>
    <li class="selected"><a href="#">Contact Us</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Products</a></li>
</ul>

/*
 * IE6/7 Hacks
 * 用display:inline + zoom来模拟display:inline-block;
 * 基于IE对列表元素的样式渲染方式，不能对其使用垂直边框，因此用它的背景色代替 */
#menuBar-A {
    #display:inline;
    #zoom:1;
    #border:0;
    #padding:1px 0 1px 1px;
    #background:#BD9E43;
}
#menuBar-A li {
    #background:#ffc;
    #border:0;
    #margin-right:1px;
    #border-bottom:1em solid #fdcf46;
}
#menuBar-A a {
    #line-height:1;
    #border:0;
    #position:relative;
    #top:-.65em;
    _top:.3em;
}
#menuBar-A li:hover a {
    #color:#fff;
}
#menuBar-A a:hover,
#menuBar-A a:active {
    _color:#333;
}
#menuBar-A .selected,
#menuBar-A li:hover {
    #background:#c789d9;
    #border-bottom-color:#83358B;
}
#menuBar-A .selected a:hover, {
    #color:#fff;
}

列表元素之间的点/线分隔符

这个例子只需要做少量的IE Hack就可以完美实现跨浏览器兼容。

ul.one, ul.two {
    margin-left: 0;
    display: inline-block;
    #display:inline;
    #zoom:1;
    height:12px;
    line-height:12px;
    padding:0;
}

li {
    float: left;
    display: inline;
    height: 2px;
    line-height: 2px;
    position: relative;
    top: .3em;
}
li.selected {
    font-weight:bold;
}
ul.two {
    border-left: 1px solid #333;
}

ul.one li {
    border-left: 2px solid #333;
}

ul.two li {
    border-right: 2px solid #333;
}

ul.one li.first-child, ul.two li.last-child {
    border: 0;
}

a {
    color: #000;
    padding: .4em .9em;
    #position:relative;
}

<div id="menuBar-B">
    <ul class="one">
        <li class="first-child"><a href="#">About Us</a></li>
        <li class="selected"><a href="#">Contact Us</a></li>
    </ul>
    <ul class="two">
        <li class="last-child"><a href="#">Services</a></li>
        <li><a href="#">Products</a></li>
    </ul>
</div>

左右三角图标

原文并未直接给出IE6/7的处理说明，但是在范例页的样式中包含了IE6/7的Hack，这里我把它们摘出来放在下方，你也可以狠狠点击原文范例页面自行查看。

#box {
    line-height: 0;
    height: 0;
    border: .4em solid transparent;
    border-left-color: #333;
    border-right-color: #333;
    padding: 0 .3em;
    display: inline-block;
}

<ul id="menuBar-C">
    <li><a href="#">About Us</a></li>
    <li class="selected"><a href="#">Contact Us</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Products</a></li>
</ul>

/* IE6/7 Hacks */
#menuBar-C {
    #display:inline;
    #zoom:1;
    #width:10em;
}
#menuBar-C li {
    #padding:0;
    #margin:.4em;
    #list-style-type:none;
    #height:0;
    #border-top:.4em solid #fff;
    #border-bottom:.4em solid #fff;
    #border-left:.4em solid #2F2876;
    #border-right:.4em solid #2F2876;
    _position:relative;
}
#menuBar-C a {
    #border:0;
    #height:auto;
    #line-height:1;
    #top:-.4em;
    #position:relative;
    _position:absolute;
    #left:-.4em;
}
#menuBar-C li:hover {
    #border-left:.4em solid #f60;
}

IE6与透明边框

IE6不支持用于边框颜色的“transparent”关键字。如果在IE6下指定边框颜色为透明（transparent），IE6将会绘制成黑色边框。

解决办法是使用 chroma filter，它可以让对象内容中的指定颜色显示为透明色（译者注：针对IE6，还有其它的解决办法，参见IE 6 的边框不透明 bug）。例如，创建一个向右箭头，可以这样做：

#Box {
    height: 0;
    width: 0;
    border: 10px solid transparent;
    font-size: 0;
    _border-color: pink;
    _filter: chroma(color="pink");
    border-left-color: #333;
}

规则中的font-size的定义是为了解决IE6下自动撑开元素高度的问题。

译注：

1. 原文给出的css样式和html结构不对应，在译文中已做修正。
2. 原文作者对IE6/7的注释采用两种方式：*号引导属性名、以及规则最后一个选择符带逗号，在译文中我统一使用了#号引导属性名的方式。为了部分原来不清楚这些hacks方式的读者，下面再把作为本文背景知识的IE6/7、IE6 Hacks符号简单说明一下：
   • IE6/7 均支持以“*”号、“#”号引导的属性名称，其它浏览器不支持。因此，针对IE6/7的Hack可以写为：
     #zoom:1或*zoom:1
   • IE6/7 均支持最后一个选择符后面跟逗号的规则，其它浏览器不支持。因此，针对IE6/7的Hack也可以写为：
     .selector, {zoom:1}
   • IE6 支持以下划线引导的属性名，其它浏览器不支持。因此，针对IE6的Hack可以写为：
     _width:600px;

以上只是用边框实现“无图化”设计的众多技巧中的一小部分，实际上我们还可以做得更多。如果有兴趣，你可以继续阅读：

《自适应圆角》

《CSS Border三角、圆角图形生成技巧》

相关日志

• 2011-03-20 -- 容易被误解的overflow:hidden
• 2011-03-14 -- 对《优化浏览器渲染》的补充【译】
• 2011-03-12 -- 自适应的多列图文混排改进
• 2010-10-31 -- CSS技巧:如何避免IE6中的"浮动下坠"【译】
• 2010-10-20 -- clearfix改良及overflow:hidden详解【译】
• 2009-06-22 -- Whatever:hover – 无需javascript让IE支持丰富伪类
• 2012-03-30 -- 禁用Firefox自带的元素查看工具
• 2012-03-22 -- CssGaga 快速上手指南
• 2011-05-26 -- 深入解析CSS样式层叠权重值
• 2011-03-07 -- IE8/9兼容性设置

译文：http://ofcss.com/?p=1055

作者：Nicole Sullivan

本文介绍了OOCSS栅格系统中，”content:’ x x x x x x x x x x … ‘”这行怪异代码的来历。作者详细讲解了他寻找栅格系统最后一列最佳实现方式的全过程，并通过这个过程，详细讲解了zoom、overflow:hidden、display:table-cell、css生成内容等创建块级上下文的不同方法各自的优缺点，并对OOCSS最终采用的代码做了逐行讲解。

以下是译文：

每个人都问我OOCSS的栅格样式中那么多的“x”是干什么的（译者注：指OOCSS的grids.css中的一条规则，见图1）……因此我写了这篇文章。简单来说，除了清除浮动以外，即使元素几乎没有或者只有很少的内容时，让元素的宽度自适应展开。这个略有些奇妙的技巧使我们可以在所有浏览器中用display:table-cell来创建一个新的块级上下文（译注：原文此处为formatting context，根据上下文理解，作者的意思应该是指块级上下文——block formatting context）。我们还可以借助这个技巧，使用百分比宽度时解决像素值的小数舍入错误^①。解决这个问题对于实现栅格的可嵌套和可堆叠具有重要的作用。

图1

我不久前写过一篇关于用overflow:hidden创建块级上下文的文章。块级上下文是非常有用的，因为它让一个元素不环绕相邻的浮动元素（参见涛哥的《自适应的图文混排》、肉饼的《OverFlow – 一个秘密武器》），并清除它自身包含的所有浮动。实质上一个新的块级上下文使得元素表现得类似分栏（column）。任何尝试过创建栅格系统或多列布局的人都清楚这是很不容易的一件事。

方案一：Zoom

这是IE特有的解决方案。zoom属性在IE中激活了元素的hasLayout，hasLayout的元素就会创建一个新的块级上下文，清除浮动，避免浮动环绕，并且不会对标准浏览器产生任何不良的影响。

.lastUnit {
    zoom:1;
}

我希望在标准浏览器中也能有一个简单的属性值对做同样的事情，比如：

.lastUnit {
  formatting-context: new; /* please! */
}

在Safari, Firefox, Chrome 和 Opera 中有一些方法可以实现同样的效果，但是每一种都有自己的缺点，比如：

方案二：overflow:hidden

overflow:hidden 创建了新的块级上下文，基本上没有带来其它问题。对于大多数网站来说，这不失为一个不错的解决方案。但是它有一个主要的问题——该上下文内部的任何元素如果超出了边界，就会被强制隐藏。正常来说，如果你不指定高度，元素的高度会随内容扩展。

.lastUnit {
  overflow: hidden;
}

然而在一个像facebook这么复杂的网站以及很多其它网站（译注：比如腾讯朋友)，浮层、下拉菜单、横向菜单……统统都被强制隐藏了——因为他们超出了正常的文档流，并且对父节点的高度没有产生影响（大多采用绝对定位）——这个残酷的现实迫使我寻求另外的解决方案。

方案三：表格单元格

在w3c的规范中，能够创建新的块级上下文的属性值对包括：overflow:任何不为visible的值、display:table-cell, display:inline-block 以及float:left, float:right. 我开始逐一尝试。

首先是overflow，它的其它值（译注：hidden和visible以外）激活了滚动条，这让我很纠结，另外还有一个（一年前的陈年往事了，请原谅我实在想不起来具体是哪个了）则是在从右到左的文字会出现问题。

我开始测试 display:table-cell. 我用了一个OOCSS的栅格测试页面，在这个页面上每个栅格包含一个头部和一段占位文本(Lorem ipsum text^②). 让我喜出望外的是，display:table-cell有效！

.lastUnit {
  display: table-cell;
}

最后一个元素的html代码如下：

<div class="unit size1of5 lastUnit">
  <h3>1/5</h3>
  <p>Lorem ipsum atqui facilisi definitiones nec ei, vix eros consul sententiae et. Sed essent bonorum suscipiantur in. Ne per amet eirmod. Vidisse labitur inciderint ea nec, putent habemus accommodare pro te. Brute velit detraxit per at, putent vivendo mei an.</p>
</div>

我非常激动，直到我看到模块页面。所有位于最后一列的模块都收缩到文本的宽度（译注：在作者给出的模块页面，用调试工具禁用lastUnit的样式中的content，并删除.lastUnit中的内容，可以重现此bug）。我开始仔细检查正常的栅格页面和出错的模块页面之间有什么不同。在下面这张facebook评论页的截图中，你可以看到同样的问题。注意评论框变得收缩到了textarea的默认宽度。

图2

我发现 display:table-cell 会使元素收缩或扩展以适应内容（很像浮动元素的表现）。在我的栅格测试页面，占位文本实际上把最后一列撑开，占满了所在行的全部可用空间。我获得了想要的表现，但它是由内容触发的。对于OOCSS来说这样的结论是不行的，因为OOCSS要求内容和结构严格分离。我不能要求栅格中必须有内容，实际上，我根本无法预知别人会怎么使用这些栅格。

方案四：生成内容

我意识到在不要求开发者弄脏他们的HTML结构的前提下，插入这些文本（上文中起重要作用的占位文本）的唯一方法是在css中生成内容。css生成的内容并不是DOM结构的一部分，因此它们会被屏幕阅读器忽略。我重新回顾了w3c的规范，并使用YUI实现的clearfix作为我的解决方案起点。我的lastUnit列继续用display:table-cell，但是同时加上下面的这些代码：

.lastUnit {
  display: table-cell;
}
.lastUnit:after {
  clear: both;
  display: block;
  visibility: hidden;
  overflow: hidden;
  height: 0 !important;
  line-height: 0;
  font-size: xx-large;
  content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
}

有点疯狂，是吧？让我解释一下。

代码解析

首先，在启用firebug的状态下用firefox打开模块测试页。模块被放置于使用了上面技巧实现的三列栅格系统中。改变.lastUnit:after的visibility属性以便你能看到它的工作原理（译注：用chrome自带的调试工具更容易操作）。

.lastUnit:after {
  clear: both;
  display: block;
  visibility: visible;
  overflow: hidden;
  height: 0 !important;
  line-height: 0;
  font-size: xx-large;
content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
}

css生成的文本将我的lastUnit撑开，和之前的占位文本在栅格测试页面所做的一样。它们让浏览器认为这个元素需要除去浮动元素之外的所有剩余空间来显示。

接下来我们一句一句地解释：

.lastUnit {
    zoom:1;
    display: table-cell;
}

首先，我们创建一个新的块级上下文以避免文字环绕浮动元素，避免边距层叠等。旧版本的IE不支持display:table-cell，但是没关系，因为zoom解决了这个问题。后面的所有代码都不是针对IE的。

.lastUnit:after {

我们用:after伪类以便在.lastUnit对应的元素中生成内容作为最后一个元素。

clear: both;

让生成的内容清除所有非css生成的相邻元素。

display: block;

我们希望lastUnit占满剩余的空间。

visibility: hidden;

使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互。

overflow: hidden;

确保容器的高度仍然由浏览器的默认行为决定，尤其是像IE这种内容实际高度优先于指定高度的浏览器。

height: 0 !important;

确保我们生成的内容不会改变原有的布局。

line-height: 0;

再次确保我们生成的内容不要改变原有的布局。

font-size: xx-large;

大号的字体使我们可以用较少的生成内容达到我们的目的。

content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
}

假文本承担了让display:table-cell的元素扩展到完全宽度的最重要工作。

最后：解决一个Opera的bug

google论坛上有人指出这个方法在Opera上会有问题（该页面无法显示，你懂的）。貌似Opera不能把大量的 “…” 当成是普通文本来处理（这个bug已经被提交了，所以你读到这篇文章时该bug可能已经被修正）。这个问题很好解决，把所有的点都改成字母x就可以了（这就是OOCSS的grids.css中出现茫茫多x字母的缘由），其实任何字符都是可以的，不一定要用x（如果你也是文章一开始说到的提问的人之一，看到这里是不是很想把作者拉出来K一顿？）

不足之处

table-cell 和 table-cell之间会以比较怪异的方式相互影响。其它元素在自身尺寸改变时，只会影响到相邻节点和父节点，而table-cell很怪异，难以计算，因为浏览器做了很多行为来保证单元格的整齐和良好布局（都是从前表格布局惹的祸……）。这些行为付出的昂贵代价已经得到了证明，因此我很想知道这种方法在性能上造成的影响。或许可以像YUI的Jenny Han Donnelly建议的那样，设置display:fixed——这个改日再试。

总的来说，在任何可能的情况下我都避免table-cell的使用，但是在这个例子里，我尝试过可以创建块级上下文的其它所有方法都不行，只能这样做。最后，我认为浏览器开发商未来应该提供一个方法触发块级上下文而不造成任何不良影响。

附录：

①小数舍入错误：指用百分比作为宽度或高度单位时，各浏览器对小数部分的不同舍入算法引发的各种css问题。典型的情景比如：宽度为413px的容器中包含四个宽度均为25%的元素，则IE下四个元素的宽度相等，但是总宽度大于413px；而FF中四个元素的总宽度等于413px，但四个元素的宽度却不完全一致。详见：Sub-Pixel Problems in Css。

②Lorem ipsum text：一段被广泛应用于印刷和排版的占位字符，由看似随机的字母组合，模拟英文段落效果。早在14世纪这段文字就已经成为了占位文字的工业标准。有关lorem ipsum text的更多资料，请参阅：http://www.lipsum.com/

相关日志

• 2012-03-22 -- CssGaga 快速上手指南
• 2011-05-26 -- 深入解析CSS样式层叠权重值
• 2011-03-20 -- 容易被误解的overflow:hidden
• 2011-03-14 -- 对《优化浏览器渲染》的补充【译】
• 2011-03-12 -- 自适应的多列图文混排改进
• 2011-03-10 -- CSS边框实现“无图化”设计【译】
• 2010-10-31 -- CSS技巧:如何避免IE6中的"浮动下坠"【译】
• 2010-10-30 -- webkit中BFC元素临近浮动元素时的边距bug
• 2010-10-20 -- clearfix改良及overflow:hidden详解【译】
• 2010-06-09 -- 最近的书单

译文：http://ofcss.com/?p=1028

作者：Thierry Koblentz

尽管这种情况通常被称为"浮动下坠"或者"浮动下沉",但实际上下坠或下沉的列并不一定是浮动的……只要它比预留给它的空间更宽就有可能出现下沉。请记住这是一种特定情况下才会发生的在跨浏览器时很常见的行为——网页的某一栏太宽了，于是它下沉了。

IE 6的问题之所以突出，是因为它对 width 这个属性的支持不完整（height 也好不到哪里去）。因此，IE 6会让容器扩展以适应内容。而为这个容器设计的宽度却没法随之变宽，于是IE 6对容器宽度的自动扩展就造成了它的下沉。

通常情况下，罪魁祸首是那些无法包围的元素（比如图片、url等），但是文字样式（例如 IE 和 斜体）也有可能造成这种情况。

例如，要让YUIBlog的右栏在IE 6中下沉，我只需要让右栏中的某个图片的宽度大于210px。这张图将会强迫IE 6增加右栏的宽度，这样右栏就无法再保持在左栏旁边了。

常见修复方法：

• word-wrap: break-word;//强制文字截断（译注：主要针对非双字节语言，把单词强制截断）。
• wbr with wbr:after {content:"\00200B"}; //针对 Opera，wbr属性代表行截断的机会。在长文字中添加wbr以便在必要时允许浏览器换行。
• overflow-x:hidden;//隐藏溢出容器的所有内容。

要注意的是前两种方式只适用于文字，不能放置图片撑开容器。

已知会导致修复失败的情况

几周前，我遇到要为yahoo!财经的页面修复“浮动下沉”的bug。在现代浏览器中，一行长文字超出了容器显示在容器右侧外部（查看截图），但是在IE 6下，同样的文字造成了右栏下沉到主栏下方（查看截图）。麻烦的是，这部分内容是由外部提供，因此没办法对HTML代码进行修改。

由于这行文字是一组由逗号分隔的标签列表，因此之前提到的几种修复方法都不能满足需要。在这行文字内部任意位置强行截断当然比隐藏溢出部分要好，但这也不是可行的解决方案。

让IE 6正常显示

要让IE 6像其它现代浏览器一样显示这行文字，方法是给文字的容器的右边距设置一个负值（同时还要设置相对定义position:relative）。

效果演示

没有修正时

fix 修正以后

代码示例：

.fixMe {
  margin-right:-100px;
  position:relative;
}

负边距可以设置为任意大的值，只要大于实际所需宽度和指定宽度的差值即可。这就是我所说的放置浮动下沉的方法。设置相对定位（position:relative）的目的是让IE能够显示超出了父元素边缘的内容。

Things to consider 补充说明

这个hack能保证每一栏都呆在应该在的位置上，但是无法阻止溢出内容的容器变宽。因此你不能在该容器上应用背景或者边框样式，否则这些样式都会显示到父元素外部。下面有个截图，演示了在IE 6下使用这个方法同时设置边框和背景的效果：

相关日志

• 2011-03-14 -- 对《优化浏览器渲染》的补充【译】
• 2011-03-10 -- CSS边框实现“无图化”设计【译】
• 2010-10-30 -- webkit中BFC元素临近浮动元素时的边距bug
• 2010-10-20 -- clearfix改良及overflow:hidden详解【译】
• 2009-06-22 -- Whatever:hover – 无需javascript让IE支持丰富伪类
• 2012-03-30 -- 禁用Firefox自带的元素查看工具
• 2012-03-22 -- CssGaga 快速上手指南
• 2011-05-26 -- 深入解析CSS样式层叠权重值
• 2011-03-20 -- 容易被误解的overflow:hidden
• 2011-03-12 -- 自适应的多列图文混排改进

触发这个bug的条件是：

• 在一个非浮动元素上应用overflow，且其值不为visible（这将形成一个Block Formatting Context元素）。
• 这个BFC元素拥有一个浮动的兄弟元素。
• 在这个BFC元素上应用与其兄弟元素浮动方向相同的margin。
• 这个BFC元素没有指定宽度值（或者指定width:auto）

当满足触发条件时，该BFC元素的另一侧的边距将不再受css控制（在webkit核心浏览器下），而是由你所指定的与浮动元素相同的边距决定，即使你在css中明确指定另一侧的边距为0或任意值也没用。具体来说，可以分为两种情况：

• 当BFC与浮动方向相同的边距小于或等于浮动元素占据的总宽度（width+margin+padding+border）时，BFC另一侧的边距等于所设定方向上的边距（下图前两种情况）；
• 当BFC与浮动方向相同的边距大于浮动元素占据的总宽度时，BFC另一侧的边距等于浮动元素占据的总宽度（下图第三种情况）。

• 第一种情况：main的左边距为50px，小于sider的总宽度100px，于是它右侧自动出现了50px的边距（等于margin-left）；
• 第二种情况：main的左边距为100px，等于sider的总宽度100px，于是它右侧自动出现了100px的边距（等于margin-left）；
• 第三种情况：main的左边距为150px，大于sider的总宽度100px，于是它右侧自动出现了100px的边距（等于sider总宽度）；

以上截图来自这个demo页面，你可以用Safari或者Chrome自己打开查看具体情况。

要解决这个bug，只要让前面所说的四个条件任意一个不满足即可。例如：去除BFC元素上的overflow（但是很多时候我们需要这个overflow）；或者给BFC指定宽度（但是这样就失去了main自适应宽度的优势）。

最佳做法，当overflow和margin都必不可少的时候，把BFC的margin-left改成浮动元素的margin-right。

相关日志

• 2011-03-12 -- 自适应的多列图文混排改进
• 2010-10-31 -- CSS技巧:如何避免IE6中的"浮动下坠"【译】
• 2010-10-20 -- clearfix改良及overflow:hidden详解【译】
• 2009-12-21 -- 前台开发从头说起：理解css盒模型
• 2009-12-16 -- 前台开发从头说起：谈谈CSS选择符
• 2009-12-15 -- 前台开发从头说起：关于web标准化
• 2009-06-22 -- Whatever:hover – 无需javascript让IE支持丰富伪类
• 2009-04-16 -- 来自微软站点的纯CSS下拉菜单
• 2009-04-13 -- 简单、通用的JQuery Tab实现
• 2006-04-04 -- 动态实现指定图片半透明及鼠标事件