标签：
最近看了一篇总结ie常见bug的文章，里面提到ie多数的bug源于她的特有属性：hasLayout。这个属性以前也了解过一点，但没有深入去理解，于是查阅了一些相关的资料，现在在此来对这个属性作一下总结。
一、hasLayout的定义。
这里我就不一一敲了，直接复制百度的咯。
在ie中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout属性值为true时，我们说这个元素有一个布局（layout）。
如果它设置成了true，它就不得不去渲染它自己，因此元素不得不扩展去包含它的流出的内容。例如浮动或者很长很长的没有截断的单词，如果haslayout没有被设置成true，那么元素得依靠某个祖先元素来渲染它。这就是很多的ie bugs诞生的地方。
<html>, <body><table>, <tr>, <th>, <td><img><hr><input>, <button>, <select>, <textarea>, <fieldset>, <legend><iframe>, <embed>, <object>, <applet><marquee>激活“haslayout”的方式——调整下列css属性：
width：非auto任意值——优先考虑zoom：非normal任意值——该属性也为ie特有属性。一般测试的时候用zoom：1。可以避免改变其他属性破坏布局。position：absolute——可能引发新问题。display:inline-block——当一个内联元素想获得layout就要使用这个属性。min-height、max-height（除none）、min-width、max-width（除none）设置任意值——针对ie7。position：fixed——针对ie7。 重置“haslayout”：需要没有其他属性激活haslayout的前提下。
display 属性的不同：当用"inline-block"激活了haslayout 属性时，就算在一条独立的规则中覆盖这个属性为"block"或"inline"，haslayout 这个标志位也不会被重置为 false。把 mid-width, mid-height 设为它们的默认值"0"仍然会赋予 hasLayout，但是 IE 7 却可以接受一个不合法的属性"auto"来重置 hasLayout。
二、haslayout具体作用
上一部分总结了haslayout的定义和激活条件，现在来到了我们最关心的问题：haslayout到底有什么用。要说haslayout的作用，我们先来看看BFC。
什么是BFC？BFC，全称即：Block Formatting Context，直译为：块级格式化范围。W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。
要更好地理解BFC，要先来谈谈Box和Formatting Context的概念。我们知道网页布局是由很多盒子组成的，这些块就是Box。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。
这些盒子有：
而Formatting Context是一块渲染区域，它决定了其子元素如何定位，以及与其他元素的位置关系。
根据上述的一些基本概念，我把BFC简单理解成一个容器，在BFC这个容器中，元素按照BFC的规则实现布局。比如浮动元素会形成BFC，这就是为什么我们看到浮动元素布局跟普通文档流下的布局有所差别的原因。
BFC中的规则简单整理为以下几条：
哪些元素会形成BFC：
BFC在布局中的作用：
谈到作用，需要理解BFC中的布局规范。 第一条没什么好说的，就是按照正常文档流的渲染顺序对元素进行排布。
第二条是我们常说的margin重叠问题。要想两个相邻的元素不发生垂直方向上的margin重叠，需要将他们两定义在不同的BFC中。解决方法即在其中一个元素外包裹一层元素，再 对那层包裹的元素进行BFC触发。（这里可以加入上述的css属性。）
第三条意思是，在BFC包含块中，每一个元素都会与父盒子进行左对齐。如果元素具有左边的margin，那么则是元素的margin边界与父盒子的border边界对齐。这就是为什么我们 设置绝对定位时，所有具有绝对定位熟悉的元素初始化时都会以左上角重叠。
第四条跟我们的浮动布局有关。一般情况下，浮动元素会脱离文档流，即不占位置。它的兄弟元素会与它在左上角重叠。但是如果两个相邻元素都设置了浮动，那么意味着它们都是 以BFC的规则渲染，根据第四条，BFC区域不会相互重叠，所以便能理解为什么设置浮动后元素能独占空间了。
第五条不是特别理解，占且放一下。
第六条也是特别常见。在普通容器中，如果里面有浮动元素，在不设置高度的情况下，容器是不能被撑起来的，这时候通过设置overflow：hidden把其变为BFC，那么就可以包含浮 动元素了。
BFC的说明到此就告一段落了，现在回到最初讨论的haslayout的问题。ie7及以下ie版本不支持BFC的，但有私有属性haslayout，于是我们可以通过触发元素的haslayout来达成bfc的相似效果。
三、IE下因为haslayout导致的bug
……待续。
HTML+CSS总结/谈谈BFC与ie特有属性hasLayout
标签：
原文地址：http://www.cnblogs.com/Remix/p/4777257.html
