标签：
BFC与hasLayout都是CSS布局上的概念。
几个月前在微博上才了解什么是BFC，算是对布局有点初步的了解。
hasLayout则是IE6、7产生许多bug的根源。
浮动、绝对定位元素，不是块框的块容器（inline-block, table-cell, and table-caption），以及设置了overflow属性（除了visible）的块框，它们会为它们的内容形成新的 block formatting contexts （BFC）。
在一个BFC中，框一个接一个的排列。垂直方向上，框的起点是一个包含块的顶部。两个同级框的垂直距离由margin决定，垂直方向毗邻的块级框的margin会发生折叠。
在一个BFC中，每个框的左外边与包含块的左边相接触（对于从右到左的格式化，右外边接触右边）， 即使存在浮动也是这样（尽管一个框的内容区域会由于浮动而收缩），除非这个框形成了一个新的BFC（这种情况下，框本身由于浮动变得更窄）。
在这里不翻译BFC具体中文怎么读，有翻译成“块级格式化上下文”，想想觉得很别扭。我的理解是，一个BFC提供了一个方形区域，它包裹里面的块框与行内框，决定它们的布局。
形成BFC的方法：
BFC的作用：
解决办法（外边距折叠有很多解决办法）之一是为外面的黑色框添加overflow:hidden，使之形成一个BFC。
解决办法是让未浮动元素形成一个BFC，使之不与浮动元素堆叠。
hasLayout是IE下的一个专有概念（属性），它决定一个元素是否拥有一个布局。它并不是一个CSS属性，所以不能显示的对它设置true或false。一个拥有布局的元素负责它自己及其子元素的尺寸和定位，没有布局的元素由其拥有布局的祖先元素负责。当一个元素拥有布局时，就称它has layout（hasLayout为true）。hasLayout在IE8标准模式中被移除。
hasLayout的作用可以减少IE显示引擎的处理开销。在理想情况下，所有的元素都可以负责自己的尺寸和定位，但这在早期版本的IE中会产生很大的性能问题，所以IE只对一部分元素设置hasLayout。
默认拥有布局的元素有：
html，body，table，tr，th，td，iframe，object, applet，img，hr，input，button，select，textarea，fieldset，legend等。
设置以下属性会使一个元素拥有布局：
IE7还可以通过一下属性设置hasLayout：
hasLayout有点类似于BFC，比如在上文BFC中的情景都可以在IE6、7用触发hasLayout的方法解决。IE6、7的很多布局产生的bug（如3px间隙、绝对定位的继承宽度）都可以通过触发hasLayout修复，比较推荐的方法为zoom:1与height:1%，不会破坏已有的样式。
设置有些属性（如float、position、display）会同时形成BFC与触发hasLayout，或者在>=IE7时可以设置overflow同时搞定两者。若只触发（形成）了其中一个，也最好同时触发（形成）另一个，以保证浏览器的兼容。
标签：
原文地址：http://www.cnblogs.com/xiaoxiaozhao/p/4309871.html
