# Learn CSS Layout 翻译
## Box positioning in CSS
CSS布局的核心在于将一组HTML元素映射到一组矩形框，并通过x,y,z定位。
这些盒子的定位取决于应用到盒子上的定位方案。本章将会讨论CSS2.1引入的三种定位方案:文档流(normal flow),浮动(floats)和绝对定位(absojute positioning)。
概念上CSS布局的最高抽象就是定位方案。一旦选定了定位方案，其可以被特定的定位模式修改，如`diaplay:table`或者`display:inline-table`。即使CSS3的扩展，引入了其他的定位模式如flexbox和grid，其仍然存在于重要的定位方案里。如(`display:flex`和`display:inline-flex`）。
### 定位方案
CSS2.1定义了三种定位方案
- normal flow：包含三种formating contexts：block，inline和relative formatting context
- floats：其和normal flow以独特的方式交互。
- abaolute positioning：处理absolute和fixed元素。
这些定位方案对于元素的x，y坐标有重要影响。规范描述了了其交互影响。简而言之所有元素默认为normal flow，除非特别的设置了float属性和position，其将从文档流移除。
| Attribute | Default value | Purpose |
| --------- | --------------- | ---------- |
| display | block or inline | 决定布局算法 |
| position | static | 控制元素定位 |
| float | none | 允许其他元素环绕周围 |
浮动和绝对定位元素都通过与文档流的交互得到更好理解，所以先讲文档流。
如果仔细想一下，实际上布局有两方面
- 盒子的大小和对齐方式，其主要由display，width，height，magin控制
- 元素在父元素里相对其他元素如何摆放
元素在父元素中的相对位置由formatting context控制，其由特定父元素为所有的子元素建立，这意味着在文档流中要么处于block formatting context要么处于inline formatting· context。
父元素为根据子元素是inline-level还是block-level为子元素建立了fc。这里的inline-level 和block-level用来强调即使block的display属性不为inline和block，其仍然映射到这两种fc里。例如`display:table`元素被认为是block-level而`display:inline-table`被认为是inline-level。
一个block-level元素定义如下
> block-level是那些以block形式排版的元素（如段落），含有下列display属性的为block-level：‘block','list-item','table'。
>
> block-level 是那些参与bfc的盒子。每个block-level元素都生成一个主要的block-level盒子，也是该盒子参与定位方案。一些block-level元素还可能产生额外的盒子（比如list-item）这些额外的盒子相对于主要盒子放置。
几乎所有的block-level盒子也是block-container盒子。一个block container是其他盒子的父元素，并且有独特的fc（注：这里并没有强调其形成bfc,实际上还可能产生ifc，只有满足特定条件下，才能产生bfc，其他条件则是产生ifc）。
> 除了table boxes[…]和替换元素，一个block-level盒子也是一个container box。一个block container box要么仅包含block-level盒子，要么仅包含inline-level盒子。
一个inline-level元素定义如下：
> inline-level元素是那些不产生新盒子的元素。这些内容散布于各行（如em，inline images）含有以下display属性的元素为inline-level：'inline','inline-table','inline-block'。inline-level元素生成inline-level盒子，其参与ifc。
>
> 一个inline box即是inline-level并且其内容参与其包含的ifc。一个带有display为inline的非替换元素生成inline box。不是inline box的inline-level 盒子（比如inline-level 替换元素，inline-block元素，inline-table元素）被称为atomic inline-level 盒子，因为其作为一个透明的盒子参与自身的inc。
这里不讲替换元素和非替换元素。你可以把这两种fc对应到垂直排列和水平排列。
上述fc有趣的地方在于每个盒子的fc必须是ifc或者bfc。但是假如我们的孩子元素是block-level和inline-level的混合怎么办。答案就是inline-level元素会被提升为block-level元素，这就叫匿名盒子生成
### Anonymous box generation
匿名盒子生成用于当一个父元素既包含inline-level也包含block-level或者既包含inline-level也包含text。
> 如果一个block container box含有一个block-level，那么我们迫使他仅包含block-level
### Normal flow positioning
normal flow中，盒子参与一个特定父元素的