BFC与hasLayout

BFC与hasLayout都是CSS布局上的概念。

几个月前在微博上才了解什么是BFC，算是对布局有点初步的了解。

hasLayout则是IE6、7产生许多bug的根源。

一、BFC

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

翻译过来就是：

浮动、绝对定位元素，不是块框的块容器（inline-block, table-cell, and table-caption），以及设置了overflow属性（除了visible）的块框，它们会为它们的内容形成新的block formatting contexts（BFC）。

在一个BFC中，框一个接一个的排列。垂直方向上，框的起点是一个包含块的顶部。两个同级框的垂直距离由margin决定，垂直方向毗邻的块级框的margin会发生折叠。

在一个BFC中，每个框的左外边与包含块的左边相接触（对于从右到左的格式化，右外边接触右边），即使存在浮动也是这样（尽管一个框的内容区域会由于浮动而收缩），除非这个框形成了一个新的BFC（这种情况下，框本身由于浮动变得更窄）。

在这里不翻译BFC具体中文怎么读，有翻译成“块级格式化上下文”，想想觉得很别扭。我的理解是，一个BFC提供了一个方形区域，它包裹里面的块框与行内框，决定它们的布局。

形成BFC的方法：

float:left|right
position:absolute|fixed
display:inline-block|table-cell|table-caption
overflow:hidden|auto|scroll

BFC的作用：

情况1：

解决办法（外边距折叠有很多解决办法）之一是为外面的黑色框添加overflow:hidden，使之形成一个BFC。

情况2：

解决办法是让未浮动元素形成一个BFC，使之不与浮动元素堆叠。

情况3：形成BFC的元素可以清除它内部的浮动，使得高度不“塌陷”。

二、hasLayout

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等。

设置以下属性会使一个元素拥有布局：

position:absolute
float:left or right
display:inline-block
width:any value other than auto
height:any value other than auto
zoom:any value other than normal
writing-mode:tb-rl

IE7还可以通过一下属性设置hasLayout：

overflow:hidden or scroll or auto
overflow-x:hidden or scroll or auto
overflow-y:hidden or scroll or auto
min-width:any value other than auto
max-width:any value other than auto
min-height:any value other than auto
max-height:any value other than auto

hasLayout有点类似于BFC，比如在上文BFC中的情景都可以在IE6、7用触发hasLayout的方法解决。IE6、7的很多布局产生的bug（如3px间隙、绝对定位的继承宽度）都可以通过触发hasLayout修复，比较推荐的方法为zoom:1与height:1%，不会破坏已有的样式。

设置有些属性（如float、position、display）会同时形成BFC与触发hasLayout，或者在>=IE7时可以设置overflow同时搞定两者。若只触发（形成）了其中一个，也最好同时触发（形成）另一个，以保证浏览器的兼容。