CSS BFC hasLayout模型

BFC(Block Formatting Context)，简单讲，它是提供了一个独立布局的环境，每一个BFC都遵照同一套布局规则。例如，在同一个BFC内，盒子会一个挨着一个的排，相邻盒子的间距是由margin决定且垂直方向的margin会重叠。而float和clear float也只对同一个BFC内的元素有效。

 

 

非块级盒子的浮动元素、绝对定位元素及块级容器(好比inline-blocks，table-cells和table-captions)，以及overflow属性是visible以外任意值的块级盒子，都会建立了一个BFC。即当元素CSS属性设置了下列之一时，便可建立一个BFC:

 

float：left|right

position：absolute|fixed

display: table-cell|table-caption|inline-block

overflow: hidden|scroll|auto

 

IE中HasLayout是IE浏览器引擎内部特有的属性，它能够影响到元素的定位和元素之间的相互做用。当一个元素的HasLayout属性为true时，这个元素才能够决定本身和其子孙元素的布局。

 

因此，当发现有些元素的布局在IE下有异常时，能够有充分的理由来怀疑多是hasLayout属性为false。并且这个属性值不能直接设置。一个元素要么默认拥有，要么经过设置特定的CSS属性来获取。直接的使元素hasLayout属性值为true的方法是声明下面的CSS属性之一：

 

width: 除auto以外的值

height: 除auto以外的值

float: left|right

position: absolute

display: inline-block

writing-mode: tb-rl(IE)

zoom: 除normal以外的值

IE7中增长了一些一样效果的属性：

min-height: 任意值

max-height: 除 “none” 以外的任意值

min-width: 任意值

max-width: 除 “none” 以外的任意值

overflow: hidden|scroll|auto

overflow-x: hidden|scroll|auto

overflow-y: hidden|scroll|auto

position: fixed

 

最经常使用的是zoom:1，由于这个设置对元素外观不会形成任何影响。可是这个属性是IE特有的CSS属性，不会经过CSS检查器W3C提供的CSS校验器（固然，让不让经过校验实际取决于各类校验器的规则）。