解析 CSS 格式化上下文

⭐️ 更多前端技术和知识点，搜索订阅号 JS 菌 订阅

✴️ BFC 块级格式化上下文

BFC(Block Formatting Contexts)，块级格式化上下文。BFC 实际上就是页面中一块渲染区域，该区域与其余区域隔离开来。容器里面子元素不会影响到外部，外部的元素也不会影响到容器里面的子元素。 🦊

规范

BFC 内部的盒子会从上至下一个接着一个顺序排列。BFC 内的垂直方向的盒子距离以 margin 属性为准，上下 margin 会叠加。每一个元素的左侧最外层边界与包含块 BFC 的左边相接触(对于从左往右的格式化，不然相反)。即便存在浮动也是如此。BFC 的区域不会与 float box 折叠。BFC 的高度也会受到浮动元素的影响，浮动元素参与计算。 🚩

主要做用

• 建立独立的渲染环境
• 防止因浮动致使的高度塌陷
• 防止上下相邻的外边距折叠

如何建立 BFC

• html 元素自己就是 BFC
• display === flow-root/inline-block/table-cell/table-caption/table/table-row/table-row-group/table-header-group/table-footer-group/inline-table/flex/inline-flex/grid/inline-grid
• position === absolute/fixed
• contain === strict/layout/paint/content
• float !== none
• overflow !== visible ✔️ 最经常使用
• column-count !== auto
• column-width !== auto
• column-span === all

display 为 table 会产生一个匿名的 table-cell；display 为 flow-rot 是一种 flow 布局，在 CSS2 中被引入。contain 属性能够更有效率的渲染元素，但兼容性差，详情见：developers.google.com/web/updates… 布局、grid 布局产生的格式化上下文，有时也被人称为 FFC/GFC

几个例子

防塌陷 🌰

div {
    border: 1px solid gray;
    /* overflow: hidden; */
}
p {
    float: left;
}
复制代码

<div>
    <p>✈</p>
</div>
复制代码

建立 BFC 后

避免折叠 🌰

div:nth-of-type(2) {
    background: red;
    /* overflow: hidden; */
}
.this {
    border: 1px solid gray;
    margin: 20px 0;
}
复制代码

<div class="this">1️⃣</div>
<div>
    <div class="this">2️⃣</div>
</div>
复制代码

建立 BFC 后

✳️ IFC 内联格式化上下文

IFC(Inline Formatting Contexts)，内联格式化上下文。IFC 中的 line-box （也称行盒）的高度是根据包含行内元素中最高的实际高度计算而来。（不受垂直方向的 padding/margin 的影响） 🚸

相关知识点

顶点、中线、基线、底线，以及行距、半行距、font-size 大小、line-height 大小见图：

• inline-box 行内框，高度由 font-size 决定
• line-box 行框，高度由该行框内最大高度的行内框决定
• content area 内容区域，高度是 font-size 和 padding 的和
• containing box 包含框，最外层的包裹盒子

line-height 的计算方法：

• 固定值，若是设置了固定的值，如 20px，那么行高即为 20px
• 百分比，当前 font-size * 百分比，即为行高
• normal 或数字，normal 则是浏览器默认设置的值，通常为 1.2，若是是自定义的数值，好比 1.5，那么行高即为 font-size * 1.5

有关 line-height 的计算方法见这篇文章 segmentfault.com/a/119000000…

规范

行内元素从包含块顶端水平方向上逐一排列，水平方向上的 margin/border/padding 生效。行内元素在垂直方向上可按照顶部、底部或基线对其。

当几个行内元素不能在一个单独的行盒中水平放置时，他们会被分配给两个或更多的(vertically-stacked line boxes)垂直栈上的行盒，所以，一个段落是不少行盒的垂直栈。这些行盒不会在垂直方向上被分离（除非在其余地方有特殊规定），而且他们也不重叠。

• 垂直方向上，当行内元素的高度比行盒要低，那么 vertical-align 属性决定垂直方向上的对齐方式。
• 水平方向上，当行内元素的总宽度比行盒要小，那么行内元素在水平方向上的分部由 text-align 决定。
• 水平方向上，当行内元素的总宽度超过了行盒，那么行内元素会被分配到多个行盒中去，若是设置了不可折行等属性，那么行内元素会溢出行盒。
• 行盒的左右两边都会触碰到包含块，而 float 元素则会被放置在行盒和包含快边缘的中间位置。

折行：

<p>balabala ...<span class="hl">hello world</span> inline formating context</p>
复制代码

空间不足的折行：

主要做用

• 行内元素按照 text-align 进行水平居中
• 行内元素撑开父元素高度，经过 vertical-align 属性进行垂直居中

水平垂直居中 🌰

<p>hello <span class="big">world</span> inline formating context</p>
复制代码

p {
    border: 1px solid gray;
    text-align: center;
}

.big {
    font-size: 60px;
    vertical-align: middle;
}
复制代码

其余还有 GFC、FFC 就是二维的网格布局和自适应的 Flex 布局。两种布局产生网格布局格式化上下文和自适应格式化上下文。

参考：

• developer.mozilla.org/en-US/docs/…
• segmentfault.com/a/119000000…
• www.w3.org/TR/CSS2/vis…

请关注个人订阅号，不按期推送有关 JS 的技术文章，只谈技术不谈八卦 😊