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

1HASLAYOUT

  首先,haslayout翻译成中文就是有布局

  所谓布局,指的是一个元素可以对本身和里边的元素进行尺寸计算和定位。这里只是谈IE6/7,据说微软之所以不是对所有元素默认有布局,是为了浏览器的性能和简洁--!

  常见的哪些元素在ie6/7上是有布局的呢?常见的列举下:

body,html,table/tr/th/td,img,input/button/file/select/textarea,frame

  所以对于divspanp等等元素就可能会出现没有布局的情况,就是没对对自身和里边元素进行相应的定位计算,而是靠的其他一些或是继承或是默认的方式进行定位。对于这种情况,就要触发该元素的haslayout属性了,触发的的手段有:

// 对以下属性设值可触发haslayout

zoom: (除 normal 外)
float: (非空) position: absolute
display: inline-block
//块级元素的触发 
width/height: (除auto外)

  ie7还有其他的一些触发方法,没必要一一列举了。

  最常用的是zoom:1;因为设置这个一般不会影响其他属性,当然,有时候比如对块级你用width或是height属性已经触发了haslayout,就没必要多此一举的设zoom了。

  举个常见的例子,e.g:

  比如要设个内联元素为inline-blockie67的原理是触发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的代码就知道了。记住则己所需。

 

2BFC

  还是先翻译下,即是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>

  2BFC包容浮动,不会让浮动子元素越界。e.g:

//去掉触发的overflow试试

<div style="backgroun:red;/*overflow:hidden;*/">

    <img style="float:left;" src="123.jpg">

    <p>your ... text</p>

</div>

  3BFC本身不会与外界的浮动重叠。 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/7haslayout和其他的BFC各显神通,不免会引起对比,通过触发的常用条件,不难发现,以下是可以同时触发haslayoutBFC的:float(非空)/positionabsolute/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/

 

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

你可能感兴趣的:(layout)