CSS的BFC和hasLayout及其应用场景

前端精选文摘：BFC 神奇背后的原理

一、BFC是什么？

先介绍 Box、Formatting Context的概念。

Box: CSS布局的基本单位

　Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子：

• block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；
• inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；
• run-in box: css3 中才有， 这儿先不讲了。

Formatting context

　　Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。

BFC布局规则：

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

二、哪些元素会生成BFC?

BFC（ block formatting context）块级格式上下文

当发生下面的任一条时，就会触发BFC

• the root element or something that contains it
• floats (elements where float is not none)
• absolutely positioned elements (elements where position is absolute or fixed)
• inline-blocks (elements with display: inline-block)
• table cells (elements with display: table-cell, which is the default for HTML table cells)
• table captions (elements with display: table-caption, which is the default for HTML table captions)
• elements where overflow has a value other than visible
• flex boxes (elements with display: flex or inline-flex)

1. 根元素
2. float属性不为none
3. position为absolute或fixed
4. display为inline-block, table-cell, table-caption, flex, inline-flex   
5. overflow不为visible

display:table 本身并不会创建BFC，但是它会产生匿名框(anonymous boxes)，而匿名框中的display:table-cell可以创建新的BFC，换句话说，触发块级格式化上下文的是匿名框，而不是display:table。所以通过display:table和display:table-cell创建的BFC效果是不一样的。

三、hasLayout

从表现上来说，hasLayout 可以等同于 BFC

IE浏览器版本:

IE6(2001年8月)   IE7(2005年7月)   IE8(2009年3月)   IE9(2011年3月)   

IE6-7的显示引擎使用的是一个称为布局（layout）的内部概念，由于这个显示引擎自身存在很多的缺陷，直接导致了IE6-7的很多显示bug。

当我们说一个元素“得到 layout”，或者说一个元素“拥有 layout” 的时候，我们的意思是指它的微软专有属性 hasLayout被设为了 true 。

IE6-7使用布局的概念来控制元素的尺寸和定位，那些拥有布局（have layout）的元素负责本身及其子元素的尺寸设置和定位。如果一个元素的 hasLayout 为false，那么它的尺寸和位置由最近拥有布局的祖先元素控制。

触发hasLayout的条件：　

•    position: absolute
• 　float: left|right
• 　display: inline-block
• 　 除 “auto” 外的任意值
• 　height: 除 “auto” 外的任意值 （例如很多人闭合浮动会用到 height: 1% ）
• 　zoom: 除 “normal” 外的任意值 (MSDN) http://msdn.microsoft.com/worksh ... properties/zoom.asp
• 　writing-mode: tb-rl (MSDN) http://msdn.microsoft.com/worksh ... ies/writingmode.asp
• 　在 IE7 中，overflow 也变成了一个 layout 触发器：
• 　overflow: hidden|scroll|auto （ 这个属性在IE之前版本中没有触发 layout 的功能。 ）

综上所述：

在支持BFC的浏览器（IE8+，firefox，chrome，safari）通过创建新的BFC闭合浮动；

在不支持 BFC的浏览器 （IE6-7），通过触发 hasLayout 闭合浮动。

应用场景