什么是hasLayout？

想更好的理解CSS，尤其是IE下对CSS的渲染，hasLayout是一个非常有必要彻底弄清楚的概念，大多数IE下的显示错误，就是源于hasLayout。hasLayout是一种只读属性，有两种状态true或false，当其为true时，代表该元素有自己的布局，否则代表该元素的布局继承于父元素。

什么是Layout呢？

"Layout" 是 IE 的一个私有属性，并不是W3C标准。它决定了一个对象（就是一个标签div、li等）在内容中如何显示、与周围对象的位置关系、以及怎样响应程序或用户产生的事件。

这个属性可以被一些css强制激活。一些HTML标签默认具有haslayout。
PS：一个对象的layout属性被激活，它的具体表现就是haslayout=true。我们可以用IE Developer Toolbar工具看到被激活的对象带有"haslayout = -1"的属性。

你可能就问：微软干嘛要设layout这个东西呢？当一个对象的layout被激活时，它以及它的子对象的定位和尺寸计算将独立进行，不受附近对象 的干扰。也就是说它拥有一个独立的布局（layout）。因此浏览器要花费更多的代价来处理拥有haslayout的对象。为了提高性能，微软增加了 layout这个IE私有的概念。

通过element.currentStyle.hasLayout可以得出当前元素的hasLayout情况

默认触发hasLayout的标签（不全）

html,body

table,tr ,th ,td

img

hr

input,button,select,textarea,fiedset

frameset,frame,iframe

触发hasLayout的CSS属性

display:inline-block

height/width:除了auto

float：left/right

position:absolute

writing-mode(IE专有属性，设置文本的垂直显示):tb-r1

zoom(IE专有属性，设置或检索对象的缩放比例):除了normal

IE7专有的触发hasLayout的CSS属性

min-height/max-geight/min-width/max-width:除了none

overflow/overflow-x/overflow-y:除了visible

position:fixed

实例：

1.解决IE7浏览器下父级边框不阻止子级上下margin传递的bug

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.list{
    border: 10px solid black;
    background-color: red;
    /*触发hasLayout*/
    /*float:left;*/
}
.in{
    height: 100px;
    width: 100px;
    margin-top: 50px;
    background-color: blue;
}
</style>
</head>
<body>
<ul class="list">
    <li class="in"></li>
</ul>
</body>
</html>

2.配合display:inline让块元素模拟inline-block

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
}
.box{
    width: 100px;
    height: 100px;
    background-color: red;
    display:inline-block;
    /*配合display:inline触发hasLayout*/
    /*     float:left;
    display:inline; */
}
</style>
</head>
<body>
<div class="box" id="box"></div><span>测试inline-block用</span>
</body>
</html>

3.解决IE7浏览器下li的4PX空隙bug（IE7浏览器下li有高度或宽度或zoom:1，且仅包含内联元素，且内联元素被设置为display:block,li下会多出3px的垂直间距）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.list{
    width: 200px;
    background-color: lightgreen;
}
.in{
    height: 100px;
    background-color: lightblue;
}
.span{
    display: block;
    zoom:1;
}
</style>
</head>
<body>
<ul class="list">
    <li class="in">
        <span class="span">1231</span>
    </li>
    <li class="in">
        <span class="span">1232</span>
    </li>
</ul>
</body>
</html>

4.触发浮动 元素的父级的hasLayout，浮动元素会被layout元素自动包含，相当于IE7浏览器下实现清浮动

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.list{
    background-color: lightgreen;
    height: 200px;
}

.in{
    float: left;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background-color: lightblue;
}
.test{
    width: 100px;
    height: 150px;
    background-color: yellow;
}
</style>
</head>
<body>
<ul class="list">
    <li class="in"></li>
    <li class="in"></li>
</ul>
<div class="test">测试浮动</div>
</body>
</html>