共计 2471 个字符，预计需要花费 7 分钟才能阅读完成。
CSS 的一些名词和概念
用来帮你更明确地去描述 HTML/CSS 世界的事物。
box
在 CSS 中，一个元素就可以看作一个 box。具体信息可以参考盒模型的解释，这里暂且不作展开。
containing blocks
Box 的位置和大小时根据一个称为 containing blocks 的边界进行计算的。
block-level elements 和 block boxes
block-level elements 一般指 HTML 中的特定类型的元素，比如 div，p，ul 等。block boxes 指形成一个 block formatting contexts 的 boxes。可以确定的时正常的 block-level（没有改变它的 position，display 等默认属性值）可以形成一个 BFC。But，如果元素等 display 属性值为 ‘block’, ‘list-item’, 或 ‘table’ 中的一种，也可以对外表现出块级元素的行为。也会成为一个 block box。
BFC（Block formatting contexts）
哪些情况会产生一个 BFC：
根元素
float 元素（float 属性不是 none）
display：block，table-cell，table-captain，list-item，table、table-row、table-row-group、table-header-group、table-footer-group
position 是 absolute 的元素（绝对定位）
overflow 不等于 visible
flex 元素
grid 元素
在一个 BFC 中，形成一个独立的布局环境，里面元素等布局位置不会受外部元素影响。
IFC（Inline formatting contexts）
与 BFC 对应，一个行内元素默认也会形成一个 IFC（行内格式化上下文）。IFC 有个不同于一般的常识的特性：
当 inline-level box 宽度大于父容器宽度时会被拆分成多个 inline-level box; 当属性 direction 为 ltr 时，margin/border/padding-left 将作用于第一个的 inline-level box，margin/border/padding-right 将作用于最后一个的 inline-level box; 若属性 direction 为 rtl 时，margin/border/padding-right 将作用于第一个的 inline-level box，margin/border/padding-left 将作用于最后一个的 inline-level box;
<p style=”margin-left:100px;margin-right:20px;border:1px dashed #ccc;”>
<span class=”before”> before </span>
<span class=”cotent” style=”margin-left: 100px; margin-right: 20px;”> An inline box is one that is both inline-level and whose contents participate in its containing inline formatting context. A non-replaced element with a ‘display’ value of ‘inline’ generates an inline box. Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes because they participate in their inline formatting context as a single opaque box. </span>
<span class=”after”> after </span>
</p>
注意示例中，content 元素这段话开头和结尾的外边距大小。
在 CSS2 中，一个盒子的定位模式通常是一下三种：
Normal flow：正常的文档流是由 BFC、IFC 和 position 是 relative 的 block boxes 或 inline boxes 组成。
Floats float 属性值不等于 none 的元素通常称之为浮动元素。
absolute positioning（绝对定位元素）绝对定位的元素完全从正常的文档流中移除，它的位置不会影响它后面元素的位置。
positioned element
position 属性值不是 static 的元素称之 positioned element。
display，position 和 float 的相对关系
我们知道，display，position 和 float 都会对元素的布局位置表现产生影响。那么它们三者之间是如何起作用的呢？
如果 display:none; position 和 float 将不会再起任何作用；
如果 position 属性是 absolute 或 fixed，则 float 属性置为 none（可以理解为不再存在 float 行为，即使手动设置了 float 不为 none），display 行为依据下表的规则展示；元素的定位会依据 top/right/bottom/left 进行计算。
如果 float 属性值不为 none，则 display 属性依据下表的规则展示；
如果元素是根元素，则 display 的展示依据下表规则表现。
其它情况，依据 display 设定的值进行处理
指定值
最终表现值
inline-table
table
inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block
block
others
与指定值相同
