FC，即formatting context，格式上下文——————它是W3C CSS2.1规范中的一个概念，定义的是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。常见的Formatting Context有：Block Formatting Context（BFC |块级格式化上下文） 和Inline Formatting Context（IFC |行内格式化上下文）。一个页面是由很多个Box组成的，元素的类型和display属性决定了这个Box的类型。不同类型的Box，会参与不同的Formatting Context。Block level的box会参与形成BFC，比如display值为block，list-item，table的元素。Inline level的box会参与形成IFC，比如display值为inline，inline-table，inline-block的元素。
BFC，块级格式上下文，Block Formatting Context
形成、触发BFC:1.float的值不为none。
2.overflow的值不为visible。
3.display的值为table-cell, table-caption, inline-block中的任何一个。
4.position的值不为relative和static。
（CSS3触发BFC方式可以简单描述为：在元素定位非static，relative的情况下触发，float也是一种定位方式）
BFC的规则:
BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
BFC的作用与特点：
不和浮动元素重合，清除外部浮动，阻值浮动元素覆盖；
如果一个浮动元素后面跟着一个非浮动元素，那么就会产生一个重叠的现象。常规流是一个文档在被显示时最常见的布局形态，当float不为none时，position为absolute、fixed时元素将脱离标准流。
BFC布局规则：
内部的Box会在垂直方向，一个接一个地放置。Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠，每个元素的左外边缘（margin-left)，与包含块的左边（border-left）相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。除非这个元素自己形成了一个新的BFC。BFC的区域不会与float box重叠。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。计算BFC的高度时，浮动元素也参与计算。
IFC，Inline Formatting Context ，行内格式化上下文
布局规则：
在行内格式化上下文中，框(boxes)一个接一个地水平排列，起点是包含块的顶部。水平方向上的margin，border和padding在框之间得到保留。框在垂直方向上可以以不同的方式对齐：它们的顶部或底部对齐，或根据其中文字的基线对齐。包含那些框的长方形区域，会形成一行，叫做行框。
网友评论