CSS2.1常规流（包含BFC，IFC）

本文主要是介绍CSS2.1常规流（包含BFC，IFC），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

常规流中的盒可能是块，可能是行内，块级盒参与块格式话上下文（BFC），行内级盒参与行内格式化上下文（IFC）

一、BFC（Block Formatting contexts）

BFC就是我们常说的块级格式化上下文。

哪些元素会建立新的块级格式化上下文？

浮动元素
绝对定位元素
非块盒的块容器（display为inline-blocks、table-cells和table-captions）
overflow不为 “ visible ” 的块盒

BFC有哪些特点？

在同一个块格式化上下文中，垂直方向上的块级盒上下margin会合并（collapse），见《深入研究外边距合并（collapse）》
一个块级格式化上下文中，每个盒的左外边界（指的margin外边界）挨着包含块的左外边界（指的border外边界）（从右向左的格式化则相反）。
即使存在浮动也成立。除非该盒建立了新的块级格式化上下文。
匿名块盒（很重要）

二、IFC（Inline Formatting contexts）

IFC是行内格式化上下文。
IFC的特点：

内部盒水平挨个放置，并且水平上的margin、padding、border都有效。
内部盒的对齐方式有：底部或者顶部对齐，以这些盒子内部的文本基线进行对齐。
行框：包含来自同一行的盒的矩形区域。它总是能容纳下它包含的所有盒。
当行框中一个盒的高度小于它所在的行框的高度时，它的对齐方式由 “vertical-align” 属性决定。当行的内容超出容器的宽度时，他会被分隔成几个行框换行排列。行框垂直排列时总是紧挨着。
行内盒如果超出行框的宽度时，可以分成几个盒跨多个行框显示。但是行内盒不一定能被拆分（如果该行内盒只含单一字符，或者特定的语言单词分隔规则不允许在该行内盒里分隔，或者该行内盒受到一个值为nowrap或者pre的white-space的影响）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><style>.p {width: 10em;border: solid aqua;}span{float: left;width: 5em;height: 5em;border: solid blue;}</style></head><body><p class="p">Supercalifragilisticexpialidocious<span></span></p></body>
</html>