重学前端之BFC、IFC、FFC、GFC

原创

一起重学前端

发布于 2024-12-02 10:56:05

1.9K0

“好事”文章推荐：《Redis数据库入门指南》

文章地址：https://cloud.tencent.com/developer/article/2472585

好文介绍：在当今的数据驱动时代，数据库的选择对于应用程序的性能、可扩展性和功能实现起着至关重要的作用。Redis作为一款高性能的键值对存储数据库，正逐渐在众多领域崭露头角。

BFC、IFC、FFC、GFC是什么，主要解决的什么问题，哪些元素会生成BFC？

在解释之前，需要先介绍 Box、Formatting Context的概念。

Box: CSS布局的基本单位

Box 是 CSS 布局的对象和基本单位，直观点来说，就是一个页面是由很多个 Box 组成的。 元素的类型和 display 属性，决定了这个 Box 的类型 。不同类型的 Box，会参与不同的 Formatting Context （一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子：

block-level box:

display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context

inline-level box:

display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context

run-in box: `display 属性为flex,grid`

如果 run-in box 包含 block box，那么这个 run-in box 也成为 block box
如果紧跟在 run-in box 之后的兄弟节点是 block box，那么这个 run-in box 就会做为此 block box 里的 inline box，run-in box 不能进入已经一个已经以 run-in box 开头的块内，也不能进入本身就是 display:run-in; 的块内
否则，run-in box 成为 block box

Formatting context

ormatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。

BFC（Block Formatting Context，块级格式化上下文）

定义：BFC 是一个独立的渲染区域，在这个区域内，块级元素按照一定的规则进行布局，并且这个区域内的布局不会影响到外面的元素，外面的元素也不会干扰到它内部的布局。它就像是一个 “结界”，让内部元素的布局有一套独立的规则体系。

触发条件：满足以下条件之一即可触发 BFC：

根元素（<html> 元素）；
浮动元素（float 属性值不为 none 时）；
绝对定位元素（position 属性设置为 absolute 或 fixed 时）；
行内块元素（display 属性值为 inline-block 时）；
表格单元格（display 属性值为 table-cell 时）；
表格标题（display 属性值为 table-caption 时）；
匿名表格单元格元素（元素的 display 属性值被设置为 table、table-row、

table-row-group 等表格相关属性，且其内部包含的子元素属于表格单元格性质时，会创建匿名表格单元格元素，这些元素也能触发 BFC）；

overflow 属性值不为 visible 的元素（如 overflow: auto、overflow: hidden、overflow: scroll 等情况）；
display 属性值为 flow-root 的元素（这是专门为了创建 BFC 而新增的 display 属性值）。

作用及应用场景：

解决外边距塌陷问题：在普通的文档流中，当两个相邻的块级元素上下排列，并且都设置了外边距时，它们之间的垂直外边距会发生合并（塌陷），取两者外边距中的较大值。而如果将其中一个元素放置在 BFC 中，就可以避免外边距塌陷。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
       .parent {
            overflow: hidden; /* 触发BFC */
            background-color: lightgray;
        }
       .box1 {
            margin-bottom: 20px;
            height: 50px;
            background-color: pink;
        }
       .box2 {
            margin-top: 30px;
            height: 50px;
            background-color: lightblue;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="box1"></div>
    </div>
    <div class="box2"></div>
</body>

</html>

在上述代码中，.parent 元素通过 overflow: hidden 触发了 BFC，使得 .box1 和 .box2 的外边距不会塌陷，各自按照自己设置的外边距来布局。

清除浮动影响：当父元素内部有浮动的子元素时，父元素的高度可能会塌陷（无法正确包裹住浮动的子元素）。利用 BFC 可以解决这个问题

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
       .parent {
            background-color: lightgray;
            overflow: hidden; /* 触发BFC*/
        }
       .float-box {
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="float-box"></div>
    </div>
</body>

</html>

父元素 .parent 通过触发 BFC，其高度能自适应浮动子元素的高度，保证页面布局正常。

IFC（Inline Formatting Context，内联格式化上下文）

定义：IFC 主要针对内联元素（如 span、a 等）进行布局管理的一种上下文环境。在 IFC 中，内联元素按照水平方向依次排列，当一行排不下时会进行换行处理，并且在垂直方向上，它们的对齐方式遵循一定的规则，比如基线对齐、顶部对齐、中部对齐等。

布局规则：

内联元素在水平方向上从左到右依次排列（对于从右到左的文字排版语言则是从右到左排列），多个内联元素之间会根据 white-space（空白符处理方式）、word-spacing（单词间距）、letter-spacing（字母间距）等属性来调整它们之间的间距。
在垂直方向上，默认是基线对齐（以元素内文字的基线为基准对齐），不过也可以通过 vertical-align 属性来改变对齐方式，如设置为 top（顶部对齐）、middle（中部对齐）、bottom（底部对齐）等。

行内元素有哪些特点呢？如下：

水平方向根据direction依次布局。
不会在元素前后换行。
受white-space属性的影响。
margin/padding 在竖直方向无效，水平方向有效的。
white/height 对非替换行内元素无效，宽度由元素内容决定。
非替换行内元素的行框高由line-height决定而替换行内元素的行框高则是由height，padding，border，margin决定
浮动或者绝对定位会转化为block
vertical-align属性生效

应用-文本排版：

在处理一段包含多个内联元素（比如不同样式的文字、链接等混合在一起）的文本内容时，IFC 规则决定了它们如何在一行内排列以及垂直方向上的对齐情况。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        span {
            font-size: 16px;
            vertical-align: middle; /* 设置垂直对齐方式为中部对齐 */
        }
    </style>
</head>

<body>
    <p>
        <span>这是一段</span>
        <span style="color: red;">有不同样式</span>
        <span>的文本内容。</span>
    </p>
</body>

</html>

在这个 <p> 段落中，几个 span 元素作为内联元素，在水平方向依次排列，并且通过 vertical-align: middle 设置了垂直方向的中部对齐方式，使文本排版更加整齐美观。

内联块元素的排列处理：当内联块元素（display 属性值为 inline-block 的元素）参与到内联布局中时，也遵循 IFC 的规则，比如多个内联块元素组成的导航栏，它们在水平方向排列以及垂直对齐方面都受 IFC 约束。

补充：包含块的概念：简单说就是定位参考框或者定位坐标参考系，元素一旦定义了定位显示（相对、绝对、固定）都具有包含块性质，它所包含的定位元素都将以该包含块为坐标系进行定位和调整。是视觉格式化模型的一个重要概念，它与框模型类似，也可以理解为一个矩形，而这个矩形的作用是为它里面包含的元素提供一个参考，元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。

FFC（Flex Formatting Context，弹性盒格式化上下文）

定义：FFC 是基于 CSS3 中 flexbox（弹性盒子）布局模块所创建的一种格式化上下文，它提供了一种更加灵活、高效的方式来进行一维布局（要么是水平方向，要么是垂直方向），能让元素在容器内方便地调整位置、大小等布局属性，以适应不同的屏幕尺寸和设计需求。

布局特性及相关属性：

主轴和交叉轴：在 FFC 中，首先要确定弹性容器的主轴（flex-direction 属性决定，取值可以是 row（水平从左到右）、row-reverse（水平从右到左）、column（垂直从上到下）、column-reverse（垂直从下到上）），与主轴垂直的方向就是交叉轴。
弹性元素的伸缩性：通过 flex 属性（可以是 flex-grow（扩展比例）、flex-shrink（收缩比例）、flex-basis（初始尺寸）这几个属性的缩写形式）来控制弹性元素在主轴方向上的伸缩情况，比如可以让几个子元素按照一定比例分配剩余空间或者在空间不足时按比例收缩等

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
       .flex-container {
            display: flex;
            flex-direction: row; /* 主轴为水平方向从左到右 */
            border: 1px solid black;
        }
       .flex-item {
            flex: 1; /* 每个子元素在主轴方向平分剩余空间 */
            height: 100px;
            background-color: lightblue;
            margin: 5px;
        }
    </style>
</head>

<body>
    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
    </div>
</body>

</html>

在上述代码中，.flex-container 作为弹性容器创建了 FFC，内部的 .flex-item 子元素通过 flex: 1 设置，能在主轴（水平方向）上平分剩余空间，实现了灵活的布局效果。

容器属性：

六个属性分别为： flex-direction,flex-wrap,flex-flow,justify-content,align-items,align-content

项目属性：

六个属性分别为： order，flex-grow，flex-shrink，flex-basis，flex，align-self

应用

响应式布局：在网页设计中，对于不同屏幕宽度（如桌面端、移动端等）的适配，FFC 可以方便地调整导航栏、内容板块等元素的布局，让它们在不同设备上都能合理展示。例如，将导航栏的菜单项设置为弹性元素，在屏幕变窄时可以自动换行或者等比例缩放宽度，保证导航功能的同时提升页面美观度和可用性。

GFC（Grid Formatting Context，网格格式化上下文）

定义：GFC 是 CSS3 中 grid（网格）布局模块所创建的一种格式化上下文，它提供了一种二维的布局方式，能像表格一样将页面划分为行和列，元素可以被精确地放置在特定的行和列交叉形成的网格单元格中，实现非常复杂且规则的页面布局效果。

布局特性及相关属性：

定义网格结构：通过 grid-template-columns 和 grid-template-rows 属性来分别定义网格的列和行的尺寸、数量等。例如，可以使用固定像素值、百分比或者 fr（fraction，分数单位，表示剩余空间的分配比例）来定义列宽和行高。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
       .grid-container {
            display: grid;
            grid-template-columns: 100px 1fr 200px; /* 定义三列，第一列宽100px，第二列占剩余空间的1份，第三列宽200px */
            grid-template-rows: 50px 100px; /* 定义两行，第一行高50px，第二行高100px */
            border: 1px solid black;
        }
       .grid-item {
            background-color: lightgreen;
            border: 1px solid gray;
        }
    </style>
</head>

<body>
    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
    </div>
</body>

</html>

.grid-container 创建了 GFC，并定义了具体的网格结构，然后内部的 .grid-item 元素会按照这个网格结构进行布局。

对齐方式：和 FFC 类似，在网格布局中也有多种对齐方式来控制元素在网格单元格内以及整个网格容器内的对齐情况，比如 justify-items（控制元素在单元格内水平方向的对齐）、align-items（控制元素在单元格内垂直方向的对齐）、justify-content（控制整个网格容器内网格内容在水平方向的对齐）、align-content（控制整个网格容器内网格内容在垂直方向的对齐）等属性，取值同样有 flex-start、flex-end、center、space-between、space-around 等常见的对齐选项。

应用

GFC和FFC应用上很相似。

页面整体布局：对于复杂的网页页面，如电商网站的商品展示页面、新闻资讯网站的文章列表页等，使用 GFC 可以清晰地划分不同的板块区域，像头部导航、侧边栏、主体内容区、底部版权信息区等，将它们按照网格结构进行布局，使页面布局更加规整、有条理。

日常开发用的最多的是 FFC，也是比较常用的，之前也写过flex：1的问题，欢迎大家阅读

未完待续，持续更新中...

感谢关注点赞评论~

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

前端

腾讯技术创作特训营S10

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

前端

腾讯技术创作特训营S10

登录后参与评论

0 条评论

热度