CSS标准定义了正常流中的排版算法，涉及块级格式化上下文和行内级格式化上下文。块级盒按顺序垂直排列，行内级盒和文字则尝试在一行内排列。浮动元素和绝对定位元素会创建新的格式化上下文。某些情况下，如overflow不为visible的块级元素，其上下文会与外部上下文融合。
正常流远离：
在 CSS 标准中，规定了如何排布每一个文字或者盒的算法，这个算法依赖一个排版的“当前状态”，CSS 把这个当前状态称为“格式化上下文（formatting context）”。
格式化上下文 + 盒 / 文字 = 位置
formatting context + boxes/charater = positions
我们需要排版的盒，是分为块级盒和行内级盒的
块级格式化上下文顺次排列元素：竖向
行内级格式化上下文顺次排列元素：横向
当我们要把正常流中的一个盒或者文字排版，需要分成三种情况处理：
- 当遇到块级盒：排入块级格式化上下文。
- 当遇到行内级盒或者文字：首先尝试排入行内级格式化上下文，如果排不下，那么创建一个行盒，先将行盒排版（行盒是块级，所以到第一种情况），行盒会创建一个行内级格式化上下文。
- 遇到 float 盒：把盒的顶部跟当前行内级上下文上边缘对齐，然后根据 float 的方向把盒的对应边缘对到块级格式化上下文的边缘，之后重排当前行盒
我们以上讲的都是一个块级格式化上下文中的排版规则，实际上，页面中的布局没有那么简单，一些元素会在其内部创建新的块级格式化上下文，这些元素有：
- 浮动元素；
- 绝对定位元素；
- 非块级但仍能包含块级元素的容器（如 inline-blocks, table-cells, table-captions）；
- 块级的能包含块级元素的容器，且属性 overflow 不为 visible。
这里的最后一条比较绕，实际上，我个人喜欢用另一种思路去理解它：自身为块级，且 overflow 为 visible 的块级元素容器，它的块级格式化上下文和外部的块级格式化上下文发生了融合，也就是说，如果不考虑盒模型相关的属性，这样的元素从排版的角度就好像根本不存在。
正常流的使用技巧
等分/填充
1218
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
