BFC、IFC、GFC、FFC

2017-06-13 本文已影响104人 LW无一

几个概念，与相关需要挖掘细节的地方。另外再来几个布局的实例。

格式化上下文和盒子算是 CSS 里最细节的概念了。

CSS2.1 规范中的 IFC（Inline Formatting Contexts）与 BFC（Block Formatting Contexts）
CSS3 新增规范，GFC（GridLayout Formatting Contexts）以及 FFC（Flex Formatting Context）。

若对这些概念存在不理解的时候，请一定要仔细阅读文档里说明的内容。首先清楚概念，即定义，了解是怎么来的，为了解决什么？

visual formatting model

visual formatting model: how user agents process the document tree for visual media.

对于可视化的格式化上下文，基于盒模型，文档树里的每个元素生成0个或者多个盒子。这些盒子的布局通过以下几点来决定：

box dimensions and type. 盒子的大小和类型
positioning scheme (normal flow, float, and absolute positioning). 定位体系
relationships between elements in the document tree. 文档树里的元素关系
external information (e.g., viewport size, intrinsic dimensions of images, etc.). 额外的信息：视口的大小，图像的本质大小
关于盒子，格式上下文，这篇文档讲的很清楚。
https://www.w3.org/TR/CSS2/visuren.html#block-formatting

inline formatting context - IFC

inline formatting context

文档说明

line-height

The height of a line box is determined as follows:

calc
- The height of each inline-level box in the line box is calculated.
- For replaced elements, inline-block elements, and inline-table elements, this is the height of their margin box
- for inline boxes, this is their 'line-height'. (See "Calculating heights and margins" and the height of inline boxes in "Leading and half-leading".)
The inline-level boxes are aligned vertically according to their 'vertical-align' property. In case they are aligned 'top' or 'bottom', they must be aligned so as to minimize the line box height. If such boxes are tall enough, there are multiple solutions and CSS 2.1 does not define the position of the line box's baseline (i.e., the position of the strut, see below).
The line box height is the distance between the uppermost box top and the lowermost box bottom. (This includes the strut, as explained under 'line-height' below.)
行高的计算与 vertical-align

Block formatting contexts - BFC

BFC 老朋友了，就不多多介绍了。

grid-formatting-context - GFC

W3C 文档说明： https://drafts.csswg.org/css-grid-1/#grid-formatting-context

尽管 CSS grid 很强，不过就目前的兼容性，是根本不可能应用到线上代码中。所以现在不对其进行了解。

flex-formatting-context - FFC

W3C 文档说明：https://drafts.csswg.org/css-flexbox-1/#flex-formatting-context

A flex container establishes a new flex formatting context for its contents. This is the same as establishing a block formatting context, except that flex layout is used instead of block layout. For example, floats do not intrude into the flex container, and the flex container’s margins do not collapse with the margins of its contents.

除了语法上的内容， flex 具体的表现和一些特性，在此文有详细的说明。

Height

高度真是简单到不能简答的一个属性了，但是你真的了解她嘛？

<div class="par">

    <div class="child1">
      <h2>222</h2>
      <h2>vgfffdfgh</h2>
    </div>
    
     <div class="child2">
      <h3>dddddd</h3>
    </div>
</div>

 .par {
  border: 1px solid gold;
  overflow: hidden;
}

.child1 {
  border: 1px solid blue;
  float: left;
  width: 200px;
}

.child2 {
  height: 100%;
  overflow: hidden;
  border: 1px solid red;
}

这是一个很简单的左固定，右全宽的布局。使用了两个 BFC : child2 触发 BFC 后，就不会与 float 区域重叠； par 创建 BFC后，其浮动的子元素得高度参与到计算中。看似没有问题，但是我想要两个子元素等高呢？ .child2 {height: 100%} 是没有用的。看下文档的描述：

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto. A percentage height on the root element is relative to the initial containing block.

也就是设定百分比是没有用的，父元素没有显示设定高度，设置的百分比会就计算成 auto

参考：