什么是haslayout？

关于 haslayout

网上找了很多介绍的文章看了，现在来总结下。

 

什么是haslayout？

　　haslayout是IE渲染引擎的一个内部组成部分。在对元素布局渲染的时候使用到，在ie里面，一个元素的尺寸计算有两种形式，要么自己对自身进行大小和计算，要么依赖父级元素进行计算和组织内容，为此IE使用了haslayout其特有的属性在渲染的时候进行标识 。haslayout的值是一个布尔值，当为true的时候，说明该元素"has layout"拥有自己的布局，此时，该元素将拥有自己的布局并将负责对自己和可能子孙元素进行尺寸和定位。因为如果对每个元素都自身拥有布局的话，这样就会大大增大了系统资源的消耗，所以，在DHTML中，大部分元素都是依赖于父级元素来进行尺寸计算和内容定位（通常是body：拥有布局影响力的元素不一定是元素的直接父级元素，可能是其祖先级元素）。

　　在此特别注意：haslayout在IE8以及IE后续的版本中已经被抛弃，所以在开发中只针对IE8以下的版本起效。

 

haslayout起什么作用？

　　* 拥有了layout使该元素拥有对自身（甚至其所以子元素）的尺寸和定位进行计算的能力（如果它的其中一个子元素拥有自己的布局，这个子元素将负责计算自己及其子元素的尺寸，但是该子元素的定位会受其父元素的影响）。

　　* 一些拥有“固定”尺寸的元素，和一些比较特殊的具有默认尺寸约束的元素，通常会拥有layout，例如：button，images，inputs，select等，这些元素的特点是即使没有设置高宽都会拥有自己的高宽。

　　* 有另外一些元素不像某些元素那样一开始就haslayout，比如div和span，但是这些元素是可以通过设置一些特殊的css来触发layout( haslayout是只读属性，一旦触发了就不可修改 )。

　　* 拥有了layout之后，该元素就会限制在一个盒子内，从而保证了元素内容不会分散到其他盒子里面。

　　* 拥有了layout之后的元素会建立起一个新的块级上下文(BFC)

　　* 拥有了layout之后的元素会无法自适应，该元素不会“自动缩小”来适应其子元素。

　　* 一个拥有了layout的盒模型会被子元素撑开( IE6下的heigh bug )

 

哪些元素会拥有layout?

　　判断哪些元素一开始就拥有layout有一个简单技巧( 自己总结,适用多数 ) ： 该元素是否预先就拥有margin,padding,height或者width这其中的属性样式，如果有的话，多数就是haslayout，一下网上网友总结的元素。

　　标签:

　　　　* body html

　　　　* table tr th td

　　　　* img

　　　　* hr

　　　　* input button file select textarea fieldset

　　　　* marquee

　　　　* frameset frame iframe

　　　　* objects applets embed

　　样式：

　　　　* float 元素

　　　　* absolute 定位元素

　　　　* inline-block 元素

　　　　* width or height 设置的元素

　　　　* zoom

　　(IE7额外)

　　　　* min-height

　　　　* max-height

　　　　* min-width

　　　　* max-width

　　　　* overflow , overflow-x , overflow-y : ( 除visible外的任意值 )

　　　　* fixed 定位

 

重置haslayout的方法？

　　* width , height ( 设为 auto )

　　* max-width , max-height ( 设为 none ) [ IE7 ]

　　* position ( 设为 static )

　　* float ( 设为 none )

　　* overflow ( 设为 visible )

　　* zoom ( 设为 normal )