BFC和haslayout

haslayout 的概念

haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中，一个元素要么本身对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不一样的概念，渲染引擎采用了 hasLayout 的属性，属性值能够为true或false。当一个元素的 hasLayout属性值为true时，咱们说这个元素有一个布局（layout）。

要想更好的理解 css， 尤为是 IE 下对 css 的渲染，haslayout 是一个很是有必要完全弄清楚的概念。大多IE下的显示错误，就是源于 haslayout。若是它设置成了true，它就不得不去渲染它本身，所以元素不得不扩展去包含它的流出的内容。例如浮动或者很长很长的没有截断的单词，若是haslayout没有被设置成true，那么元素得依靠某个祖先元素来渲染它。这就是不少的ie bugs诞生的地方。

如何激发 haslayout？

大部分的 IE 显示错误，均可以经过激发元素的 haslayout 属性来修正。能够经过设置 css 尺寸属性(width/height)等来激发元素的 haslayout，使其“拥有布局”。以下所示，经过设置如下 css 属性便可。

* display: inline-block

* height: (任何值除了auto)

* float: (left 或 right)

* position: absolute

* width: (任何值除了auto)

* writing-mode: tb-rl

* zoom: (除 normal 外任意值)

Internet Explorer 7 还有一些额外的属性(不彻底列表):

* min-height: (任意值)

* max-height: (除 none 外任意值)

* min-width: (任意值)

* max-width: (除 none 外任意值)

* overflow: (除 visible 外任意值)

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

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

* position: fixed

其中 overflow-x 和 overflow-y 是 css3 盒模型中的属性，目前还未被浏览器普遍支持。

对于内联元素(默认即为内联的元素，如 span，或 display:inline; 的元素)，

width 和 height 只在 IE5.x 下和 IE6 或更新版本的 quirks 模式下触发 hasLayout 。而对于IE6，若是浏览器运行于标准兼容模式下，内联元素会忽略 width 或 height 属性，因此设置 width 或 height不能在此种状况下令该元素具备 layout。

zoom 老是能够触发 hasLayout，可是在 IE5.0 中不支持。

BFC 的概念

BFC，块格式化上下文( Block formatting context )，是指初始化块级元素定义的环境。在CSS中，元素定义的环境有两种，一种是块格式化上下文( Block formatting context )，另外一种是行内格式化上下文( Inline formatting context )。其中咱们使用比较多的是块级可视化上下文，CSS3草案中将之称为“flow root”，但咱们仍习惯叫BFC，其的触发条件以下：

* 浮动元素（float除了none）
* 绝对定位元素(absolute/fixed)
* 设置了’display’ 属性为 “inline-block”，”table-cell”， “table-caption” 的元素
* 设置了overflow 非 “visible”的元素

使用BFC和hasLayout应该注意的问题

一、overflow:hidden触发BFC的同时，也能触发ie7的hasLayout，但overflow:hidden是ie7新添加的触发hasLayout的新属性，ie6并不支持，所以要兼容ie6必须加_zoom:1;

二、浮动和不浮动元素间，ie6会有3px的间隙，这是ie6的bug，解决方法是：若浮动元素是左浮动，则给左浮动元素加margin-right:-3px;若浮动元素是右浮动，则给右浮动元素加margin-left:-3px;

三、不浮动元素的左间距margin-left值若小于左浮动的元素宽度则不会生效，同理，不浮动元素的右间距margin-right值若小于右浮动的元素宽度也不会生效！这个跟没触发bfc或ie的haslayout时,不浮动元素的左右间距取值生效状况是保持一致的；

四、在实际运用中，浮动元素跟不浮动元素间都会加入左右间距控制，考虑到浮动元素可能会加入当前流行的多设备兼容的media query ，浮动元素的宽度会随着媒体查询的设置的css变化而变化，而不浮动元素的margin-left/right值可否生效又是跟浮动元素的宽度关联的，这时在不浮动元素上加入margin-left/right值来控制元素的间距，显示麻烦，很差掌控，推荐给浮动和不浮动元素间加间距的作法是：直接给浮动元素加margin值，而不是给不浮动元素加margin值，惟一要注意的是给浮动元素加margin值时，应该考虑到ie6浮动和不浮动元素间的3px bug，即ie下浮动元素margin-left/right正确值应该比其它浏览器的对应值小3px才能保持与其它浏览器显示效果一致。