【CSS-task15】
请描述 BFC(Block Formatting Context) 及其如何工作
分享人:钟华俊
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
block
BFC全称是Block fomatting context，直译为"块级格式化上下文"。我们来拆分理解一
下，首先了解Block；Box是盒子模型,是CSS布局中的基本单位，BOX有几种类型我们大概了解一下；
块盒block box：
block box块盒有以下特性：
- 当元素的CSS属性display为block，list-item或 table时，它是块级元素 block-level；
- 视觉上呈现为块，竖直排列；
- 块级盒参与块格式化上下文；
行内盒inline box:
- 当元素的CSS属性display为inline，inline-block或inline-table时，称它为行内级元素；
- 视觉上它将内容与其它行内级元素排列为多行；典型的如段落内容，有文本(可以有多种格式譬如着重)，或图片，
都是行内级元素；
- 行内级元素生成行内级盒(inline-level boxes)，参与行内格式化上下文(inline formatting context)。
同时参与生成行内格式化上下文的行内级盒称为行内盒(inline boxes)。所有display:inline的非替换元素生成的
盒是行内盒；
fomatting context
Formatting context是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，
它决定了其子元素将如何定位，以及和其他元素的关系、相互作用。
CSS2.1 中只有BFC、IFC（行级格式化上下文），CSS3中还增加了GFC（网格布局格式化上下文）和FFC（自适应格式化上
下文）。
几种常见的定位布局
常规流：
- 常规流中，盒子一个接着一个排列;
- 在块级格式化上下文里面， 它们竖着排列；
- 在行内格式化上下文里面， 它们横着排列;
- 当position为static或relative，并且float为none时会触发常规流；
浮动：
- 浮动元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左或右偏移，
常规流环绕在它的周边；
绝对定位：
- 绝对定位布局中，元素会整体脱离常规流，不影响常规流的布局；
了解了以上的概念我们开始进入主题。
BFC定义：
BFC是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并
且与这个区域外部毫不相干。BFC可以被理解为一种容器，一种被隔离起来了的独立容器，容器里面的元素不会在布局上
影响到外面的元素，并且 BFC具有普通容器没有的一些特性，例如可以包含浮动元素等等；
BFC的布局规则：
- 内部的盒会在垂直方向一个接一个排列（可以看作BFC中有一个常规流）；
- BFC的区域不会与float的元素区域重叠
- 计算BFC的高度时，浮动子元素也参与计算
- 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。
- 垂直方向上的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关。
- BFC是一个隔离的独立容器，容器里面的子元素不会影响到外面元素
上面罗列的一条条特性可能有点抽象，但是我们可以结合之前学习CSS中的特性对它们来加以理解；比如：CSS中块级
元素会垂直排列；浮动元素会尽量接近往左或右上方；竖直方向的两个元素的margin会重叠、 等等。
BFC在什么情况下会发生，或者说BFC有什么触发条件？
BFC有什么实际的作用？
1.BFC有什么触发条件？
在CSS2.1中规定，满足下列CSS声明之一的元素便会生成BFC
- 根元素
- float的值不为none
- overflow的值不为visible
- display的值为inline-block、table-cell、table-caption
- position的值为absolute或fixed
2.BFC有什么实际的作用？
实际用途
- 防止margin重叠（塌陷）
- 可以包含浮动元素——清除内部浮动
- 防止与浮动元素重叠——自适应两栏布局
haslayout
谈到BFC就有很多人引申到haslayout，那么haslayout又是什么呢，它和BFC有什么关系，或者说有什么共同点呢？
haslayout是IE7-浏览器的特有属性。Layout是IE浏览器渲染引擎的一个内部组成部分。渲染引擎采用了'hasLayout'属
性，属性值可以为true或者flase，当一个元素的hasLayout为true时，我们就说这个元素有一个布局（Layout），或者
拥有布局，这个时候就不用依赖其包含块了而是靠自身内容。
默认触发hasLayout的HTML标签：
- 根元素
- html,body
- table,tr,th,td
- img
- input,button,select,textarea,fieldset
可以触发hasLayout的CSS属性：
- display:inline-block
- height/width:除了auto
- float:left/right
- position:absolute
- zoom(IE专有属性，设置或检索对象的缩放比例):除了normal
与BFC的共同点
1.可以实现不和浮动元素重叠
2.可以清除元素内部浮动
3.能解决嵌套元素边距折叠的问题
7.参考文献
参考资料：http://www.cnblogs.com/elcarim5efil/p/4745796.html
——学习块格式化上下文（BlockFormattingContext）
参考资料：http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
——前端精选文摘：BFC 神奇背后的原理
参考资料：http://www.cnblogs.com/ILYljhl/p/3169419.html
——BFC与hasLayout之间的故事
8.更多讨论
由BFC引发的关于position的思考？
BFC 与 hasLayout 的比较？
