1、HASLAYOUT
首先，haslayout翻译成中文就是：有布局。
所谓布局，指的是一个元素可以对本身和里边的元素进行尺寸计算和定位。这里只是谈IE6/7，据说微软之所以不是对所有元素默认有布局，是为了浏览器的性能和简洁--!
常见的哪些元素在ie6/7上是有布局的呢？常见的列举下：
body,html,table/tr/th/td,img,input/button/file/select/textarea,frame
所以对于div、span、p等等元素就可能会出现没有布局的情况，就是没对对自身和里边元素进行相应的定位计算，而是靠的其他一些或是继承或是默认的方式进行定位。对于这种情况，就要触发该元素的haslayout属性了，触发的的手段有：
// 对以下属性设值可触发haslayout zoom: (除 normal 外)
float: (非空) position: absolute
display: inline-block
//块级元素的触发
width/height: (除auto外)
ie7还有其他的一些触发方法，没必要一一列举了。
最常用的是zoom:1;因为设置这个一般不会影响其他属性，当然，有时候比如对块级你用width或是height属性已经触发了haslayout,就没必要多此一举的设zoom了。
举个常见的例子，e.g:
比如要设个内联元素为inline-block，ie6、7的原理是触发haslayout让内联元素可以设宽高和计算布局等，所有用zoom也是一样可以代替的。注意的是width/height属性只是块级元素才有的属性，内联元素会直接忽视他们，所有会触发不了。所以可以这么说，ie6/7本身是没有对inline-block设置特有的属性，只是把这个属性增加到触发haslayout的行列而已。这就是为什么block设个inline-block是没有效果的，只是触发haslayout而已，并不会内联。因此对于ie6/7的做法是先设为内联，再触发布局，模拟出inline-block的效果，不过还是有些许的区别，这样模拟后元素之间是没有间隙的。代码如下：
//ie6/7的块级元素inline-block的实现 display: inline; *zoom: 1;
好像有点罗嗦，不知道讲清楚没有，要做到兼容各个浏览器，你就可以根据ie6/7的原理用最少的代码兼容实现inline-block的效果。具体代码想必没必要写了，要不自行google一下inline-block的兼容ie6/7的代码就知道了。记住则己所需。
2、BFC
还是先翻译下，即是block formatting contexts的缩写，翻译过来是：块级格式化上下文。以下说的都是非ie6/7的，因为ie6/7已经有专属的haslayout了，是不支持BFC的。
什么是BFC，从字面意义上不好理解，所以还是直白去理解就最好了。干脆了解下这个到底做什么用的吧，如下：
1、阻止子元素与外界的边距叠加。e.g:
//去掉触发的overflow试试 <div style="margin-bottom:10px;">123</div> <div style="/*overflow:hidden*/"> <div style ="margin-top:10px;">321</div> </div>
2、BFC包容浮动，不会让浮动子元素越界。e.g:
//去掉触发的overflow试试 <div style="backgroun:red;/*overflow:hidden;*/"> <img style="float:left;" src="123.jpg"> <p>your ... text</p> </div>
3、BFC本身不会与外界的浮动重叠。 e.g:
//去掉触发的overflow试试 <div class="clearfix"> <img style="float:left;" src="123.jpg"> <p style="200px; background:red;/*overflow:hidden;*/">your ... text</p> </div>
所以从特性上讲，BFC就是一个不让内部元素与外界相互影响，包容浮动子元素，并自身和外界的浮动盒子不重叠的盒子。就是爱其子，且又洁身自爱，不像正常的婊子。
能触发BFC的属性不多，常见的如下：
//触发BFC float:（非空） overflow: (非visible） position: (absolute/fixed) display: (inline-block)
最常用的是overflow:hidden;理由和之前的zoom一样，这样一般不会影响到其他属性。
注意的是，设置diplay:table就可以产生anonymous boxes，其中有可触发的display:table-cell属性，从而间接触发BFC。
总结：ie6/7的haslayout和其他的BFC各显神通，不免会引起对比，通过触发的常用条件，不难发现，以下是可以同时触发haslayout和BFC的：float(非空)/position（absolute）/inline-block，区别肯定也是有的，比较明显的是haslayout是可以设置width/height的，BFC则不一定了，其他一些细微之处就不一一深究了，毕竟不同的浏览器渲染的方式总是不太一样的。
最后，举个最最常用的例子做个结尾吧，刚好都有haslayout和BFC的使用，它就是我们可爱的清除浮动，细细看下吧：
.clearfix:before, .clearfix:after { content: ""; display: table; //here! } .clearfix:after { clear: both; } .clearfix { *zoom: 1；//here! }
更多详情，可参考：http://www.smallni.com/haslayout-block-formatting-contexts/
以上是个人通过各个技术网站博客的探索实践中的一些总结，如有任何错误，还请务必指出。