BFC基础了解

BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。

BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。

BFC布局规则：

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

触发BFC的情景：

• float的值不为none。
• overflow的值为auto,scroll或hidden。
• display的值为table-cell, table-caption, inline-block中的任何一个。
• position的值不为relative和static。
• 根元素

适用场景：自适应两栏布局、防止margin重叠、清除内部浮动。

IE的haslayout：

hasLayout 与 BFC 有很多相似之处，但 hasLayout 的概念会更容易理解。在 Internet Explorer中，元素使用“布局”概念来控制尺寸和定位，分为拥有布局和没有布局两种情况，拥有布局的元素由它控制本身及其子元素的尺寸和定位，而没有布局的元素则通过父元素（最近的拥有布局的祖先元素）来控制尺寸和定位，而一个元素是否拥有布局则由hasLayout 属性告知浏览器，它是个布尔型变量，true 代表元素拥有布局，false代表元素没有布局。简而言之，hasLayout 只是一个 IE 下专有的属性，hasLayout 为 true的元素浏览器会赋予它一系列的效果。

特别注意的是，hasLayout 在 IE 8及之后的 IE 版本中已经被抛弃，所以在实际开发中只需针对 IE 8 以下的浏览器为某些元素触发hasLayout。

IE 设计者默认只为一部分的元素触发hasLayout （即默认有部分元素会触发 hasLayout ，这与 BFC 基本完全由开发者通过特定 CSS触发并不一样），

除了 IE 默认会触发 hasLayout 的元素外，Web 开发者还可以使用特定的 CSS 触发元素的 hasLayout。通过为元素设置以下任一 CSS ，可以触发 hasLayout （即把元素的 hasLayout 属性设置为 true）。

display: inline-block
height: (除 auto 外任何值)
width: (除 auto 外任何值)
float: (left 或 right)
position: absolute
writing-mode: tb-rl
zoom: (除 normal 外任意值)
min-height: (任意值)
min-width: (任意值)
max-height: (除 none 外任意值)
max-width: (除 none 外任意值)
overflow: (除 visible 外任意值，仅用于块级元素)
overflow-x: (除 visible 外任意值，仅用于块级元素)
overflow-y: (除 visible 外任意值，仅用于块级元素)
position: fixed

详细可参考:http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

相关应用可参考：http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/