几个概念，与相关需要挖掘细节的地方。另外再来几个布局的实例。
格式化上下文 和 盒子 算是 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.). 额外的信息： 视口的大小，图像的本质大小
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.)
Block formatting contexts - BFC
- https://www.w3.org/TR/CSS2/visuren.html#block-formatting
- https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
- http://maxdesign.com.au/jobs/sample-block-formatting-context/index.htm
BFC 老朋友了，就不多多介绍了。
grid-formatting-context - GFC
尽管 CSS grid 很强，不过就目前的兼容性，是根本不可能应用到线上代码中。所以现在不对其进行了解。
flex-formatting-context - FFC
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
参考：
网友评论