深入解析IE浏览器专有的CSS属性hasLayout

hasLayout是什么？

hasLayout是IE浏览器拥有的一种特有的布局属性，可以影响到元素的呈现方式。具有hasLayout属性的元素，在渲染时会形成一个独立的块级格式化上下文（Block Formatting Context，BFC），这种BFC内的元素呈现方式和没有被hasLayout标记的元素有所不同。

如何让元素具有hasLayout属性？

一般情况下，具有以下CSS属性的元素都可以具有hasLayout属性：

• zoom: 1：将元素变成块状格式化上下文
• position: absolute/fixed：在IE6/IE7下，它们的容器如果没有触发 hasLayout 特性，则会产生很多奇怪的问题，因此需要强制它们的容器触发 hasLayout 特性。
• width/height： 让元素的宽高由内容决定，可以使IE7以下的浏览器解析hasLayout特性

hasLayout带来的影响与解决方案

1. 布局问题

对于某些元素，没有触发hasLayout时，会出现布局问题，例如：

<div class="outer">
  <div class="inner">inner</div>
</div>

<style>
.outer {
  border: 10px solid black;
}
.inner {
  margin: 20px;
  padding: 20px;
  border: 10px solid red;
}
</style>

当.outer没有触发hasLayout时，.inner的margin值可能会扩散到.outer之外，产生布局问题。解决方法是给.outer元素添加zoom: 1属性。

<div class="outer" style="zoom:1;">
  <div class="inner">inner</div>
</div>

1. 清除浮动
   当子元素使用float浮动时，如果没有为父元素添加hasLayout，可能会产生布局问题，即父元素自适应高度不会自动调整。

解决方法一：为父元素添加zoom: 1属性

解决方法二：

给父元素添加overflow: hidden属性。这样父元素会创建一个BFC，并在BFC中包含子元素。

<style>
  .parent {
    overflow: hidden;
  }
  .child {
    float: left;
  }
</style>

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

以上就是hasLayout属性的详细解析及两个实际使用的示例。