前几天讲闭合浮动元素的时候提到了块级格式化范围（block formatting context），现在我来详细解释一下。先看图片:
这两个普通的div的边距都是20px，但实际的边距不是20px+20px=40px，而是取20px，这就是最开始学css的同学总和我说的边距重叠，当俩个普通的div相遇时会有以下规则：
- 当两个div的边距都是正的时取最大的margin最为边距。
- 当两个div的边距都是一正一负时,边距为他们的边距相加。
刚才说的是普通情况下，所谓的普通就是没有长生格式化范围，看第二个图是产生格式化范围的情况，就是边距没有重叠，真是的边距就是20+20=40px，到现在我们知道了，产生块级格式化范围有两个特性，一个是清除浮动，一个是不会产生边距共享。下面看一下怎么才能产生块级格式化范围：
- 浮动元素,left或right皆可
- 绝对定位的元素
- table-cell table-captions 类型元素
- overflow 取职非visible的元素
还有一个问题就是当两个元素一个产生了块级格式化范围，一个没有时浏览器会怎么处理，ie6和ie7人为认为只要有一个产生了块级格式化就不应该和其他共享边距，而Firefox，opera，chrome，safari，ie8则认为应该共享边距。
边距共享还有另外一种形式就是div的嵌套，先看图片
这就是边距重叠的另外一种形式，由于div的嵌套，只有上下重叠，而左右没有重叠，当你最外层div设置padding和margin时就不会产生边距重叠，还有就是当最外成产生块级元素格式化范围时也可以避免边距重叠。
总结一下，产生块级元素格式化范围可以清除浮动和避免边距共享，而float有能产生块级元素格式化范围，所以很多人就会有float来实现上面的两个问题，或者是初学者不知道怎么回事，反正用float就能解决，这个不可取的，因为float很让人头痛。相比之下用overflow可能要好一些，但是有时定义了height或者max-height会产生一些问题，并且ie6也不会产生块级元素格式化范围，不会还好这个属性可以出发layout，可以达到同样的效果。
float是网页布局中都要使用的css属性，他为我们灵活布局提供了方便，但同时浮动太多会带来很多麻烦，所以我通常的做法是使用float完后，马上清除他。float的本质是脱离的正常的html文档流，就是由于他脱离的文档流才出现了很多麻烦。
清除浮动（我更喜欢叫闭合浮动元素）的最简单的方法就用<div style=”clear:both;”></div>加入空的标签，但是这种不够语义化，也显得不是很灵活，每次都要加额外的html。于是有人就想到css里面有一个：after的，这样就不需要加入额外的html了，完全由css完成，于是就有了下面这段比较经典的css代码：
.clear:after{
content:" ";
display:block;
height:0;
clear:both;
visibility:hidden;}
简单的解释一下吧，用after产生的内容是个空格，先display:block,然后高度为0，不让他影响布局，clear:both就是清除浮动啦，隐藏和height:0差不多就是不要影响布局。但是这么做只对支持:after的浏览器（比较多了ie8、ie9、firefox3.X、opera、chrom、safari）有作用，要是不支持怎么办呢？
不支持after的浏览器也不是很多了，最常用的可能就只有ie6、ie7了，对于ie6、和ie7的解决就是加一个height:1%;就ok了。好了，貌似所有主流的浏览器的问题都解决了。赶快进入正题。
为什么ie6、7加了个height:1%就ok了？是为了让其has layout。那么has layout是什么呢？
其实haslayout 是Windows Internet Explorer7以下渲染引擎的一个内部组成部分。在InternetExplorer7以下中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout属性值为true时，我们说这个元素有一个布局（layout）。当一个元素有一个布局时，它负责对自己和可能的子孙元素进行尺寸计算和定位。简单来说，而不是依赖于祖先元素来完成这些工作。haslayout为只读属性 一旦被触发，就不可逆转。通过 IE Developer Toolbar 可以查看 IE 下 HTML元素是否拥有haslayout，拥有 haslayout的元素，通常显示为“haslayout = -1”。
这里的has layout就是对自己和可能的子孙元素进行尺寸计算和定位来决定父元素的高度，也就是父元素适应了里面内容的高度，这回大家就明白为什么加入一个height:1%的原因了，当然也可以加入其它的属性使其has layout，如width等。当然加float也可以（float也可以触发layout），但不推荐，不要用floa来清除浮动，这样float又会产生一个浮动，那样你的页面会很乱，初学者很容易犯得一个错误。
其实清除浮动的本质就是产生一个块级格式化范围，它会自动清除内部的浮动，首先强调一下块级格式化范围不是ie6、7所独有的，而是属于css的一种现象。关于边距重叠大家应该都比较清楚，两个普通的div边距，如果是两个正数，那么他们实际的边距是取他们中最大的，如果有一个是负数就把两个值加起来，这些就是由于没有产生块级格式化的原因。如果产生了块级格式化他们就将不会共享边距，他们的会有各自的边距，他们的实际边距就会相加。
那么当一个元素产生了块级格式化一个没有会是什么情况呢？
除了ie6、7认为只要有一个产生了块级格式化就不应该和其他共享边距，其他的浏览器（ie8 ie9 Firefox chrom Safari opera）都是认为可以边距共享的。我不知道这是不是又和ie的haslayou有关。
由于float会产生块级格式化范围，所以很多刚开始学css的人就会用float来产生块级格式化范围来清除浮动和避免边距重叠。但float很恶心啊！
关于has layout和block formatting context我这里先不多说了，以后会对他们单独解释。最后回归清除浮动，对于任何浏览器只要产生块级格式化范围就可以了，对于has layout浏览器要让浮动的父级元素has layout。知道这两点以后各种清除浮动的方法就很好懂了。
为了纪念这个大地震，今天很多网站都变为 了黑白色的了。这里提供一个最简单的方法，使用ie的滤镜代码如下：
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
但是这个对于flash就不管用了。可以在FLASH代码的<object></object>之间插入：
<param value="false" name="menu"/>
<param value="opaque" name="wmode"/>
刚才说了是ie的滤镜所以只有在ie下才会起作用。非ie的浏览器着不会变化，没有什么太完美的解决方案，只能慢慢的来改。个人平时很少用ie的滤镜，只是在今天为了能够实现这样的目的才用了一下。简单的介绍一下吧。
滤镜说明：
alpha：设置透明层次
blur：创建高速度移动效果，即模糊效果
chroma：制作专用颜色透明
DropShadow：创建对象的固定影子
FlipH：创建水平镜像图片
FlipV：创建垂直镜像图片
glow：加光辉在附近对象的边外
gray：把图片灰度化
invert：反色
light：创建光源在对象上
mask：创建透明掩膜在对象上
shadow：创建偏移固定影子
wave：波纹效果
Xray：使对象变得像被x光照射一样
1、滤镜：Alpha
语法：STYLE=”filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity，Style=style, StartX=startX，StartY=startY，FinishX=finishX，FinishY=finishY)”
说明：
Opacity：起始值，取值为0～100, 0为透明，100为原图。
FinishOpacity：目标值。
Style：1或2或3
StartX：任意值
StartY：任意值
例子：filter:Alpha(Opacity=”0″,FinishOpacity=”75″,Style=”2″)
2、滤镜：blur
语法：STYLE=”filter:Blur(Add = add, Direction = direction, Strength = strength)”
说明：
Add：一般为1，或0。
Direction：角度，0～315度，步长为45度。
Strength：效果增长的数值，一般5即可。
例子：filter:Blur(Add=”1″,Direction=”45″,Strength=”5″)
3、滤镜：Chroma
语法：STYLE=”filter:Chroma(Color = color)”
说明：color：#rrggbb格式，任意。
例子：filter:Chroma(Color=”#FFFFFF”)
4、滤镜：DropShadow
语法：STYLE=”filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)”
说明：Color:#rrggbb格式，任意。
Offx：X轴偏离值。
Offy：Y轴偏离值。
Positive：1或0。
例子：filter:DropShadow(Color=”#6699CC”,OffX=”5″,OffY=”5″,Positive=”1″)
5、滤镜：FlipH
语法：STYLE=”filter:FlipH”
例子：filter:FlipH
6、滤镜：FlipV
语法：STYLE=”filter:FlipV”
例子：filter:FlipV
7、滤镜：glow
语法：STYLE=”filter:Glow(Color=color, Strength=strength)”
说明：
Color：发光颜色。
Strength：强度(0－100)
例子：filter:Glow(Color=”#6699CC”,Strength=”5″)
8、滤镜：gray
语法：STYLE=”filter:Gray”
例子：filter:Gray
9、滤镜：invert
语法：STYLE=”filter:Invert”
例子：filter:Invert
10、滤镜：mask
语法：STYLE=”filter:Mask(Color=color)”
例子：filter:Mask (Color=”#FFFFE0″)
11、滤镜：shadow
语法：filter:Shadow(Color=color, Direction=direction)
说明：
Color：#rrggbb格式。
Direction：角度，0－315度，步长为45度。
例子：filter:Shadow (Color=”#6699CC”, Direction=”135″)
12、滤镜：wave
语法：filter: Wave(Add=add，Freq=freq，LightStrength=strength，Phase=phase，Strength=strength)
说明：
Add：一般为1，或0。
Freq：变形值。
LightStrength：变形百分比。
Phase：角度变形百分比。
Strength：变形强度。
例子：filter: wave(Add=”0″, Phase=”4″, Freq=”5″, LightStrength=”5″, Strength=”2″)
13、滤镜：Xray
语法：STYLE=”filter:Xray”
例子：filter:Xray
