关于对haslayout和BFC的理解

什么是haslayout？

　　haslayout是IE渲染引擎的一个内部组成部分。在IE中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，值可以为true或false。简单来说就是拥有自己的布局管理机制。

　　并非所有的元素都默认有布局，因为如果所有的元素都默认有布局，会对性能和内存使用上产生有害的影响。

　　hasLayout属性是微软特有的过时属性，在IE8、IE9中，hasLayout属性已经被废弃，但是出于考虑浏览器兼容性问题，有必要了解。

如何激发 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 外任意值)

　　* min-height: (任意值)

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

　　* min-width: (任意值)

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

　　* overflow: (除 visible 外任意值)

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

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

　　* position: fixed

 

haslayout 问题引起的常见 bug

　　IE6 及更低版本的双空白边浮动 -----------修复: display:inline;

　　IE5-6/win 的 3 像素偏移 -----------------修复: _height:1%;

　　IE6 的躲躲猫(peek-a-boo)----------------修复: _height:1%;

　　IE6/7负margin隐藏------------------------修复:去掉父元素的hasLayout；或者赋hasLayout给子元素,并添加position:relative;

 

什么是BFC？

BFC（Block Formatting Contexts ，块格式化上下文），它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC布局规则：
　　1、内部的Box会在垂直方向，一个接一个地放置。
　　2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
　　3、每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
　　4、BFC的区域不会与float box重叠。
　　5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
　　6、计算BFC的高度时，浮动元素也参与计算

哪些元素会生成BFC？
　　1、根元素
　　2、float属性不为none
　　3、position为absolute或fixed
　　4、display为inline-block, table-cell, table-caption, flex, inline-flex
　　5、overflow不为visible

BFC常用于：1、阻止垂直外边距折叠；2、BFC避免重叠浮动元素；3、BFC可以包含浮动