实践中总结——理解haslayout和BFC

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="width: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/

 

以上是个人通过各个技术网站博客的探索实践中的一些总结，如有任何错误，还请务必指出。