前端面试中的 BFC 规范（2021前端面试宝典）
wxin55 2024-11-13 13:19 9 浏览 0 评论
BFC
最近在准备面试，真巧一次面试中也涉及到 BFC 概念，当然我回答：不知道。但其实我们平时的开发中，却时刻在利用 BFC 特性在处理样式问题。
BFC 又称 Block Formatting Context （块状格式化上下文）
MDN 解释：
A block formatting context is a part of a visual CSS rendering of a web page. It's the region in which the layout of block boxes occurs and in which floats interact with other elements.
好吧，我看了这段解释也是似懂非懂。
大概意思是：BFC 是 CSS 渲染页面环节中的一部分。在块级盒子布局的范围中出现，并且它也影响着浮动元素和其他元素。
哪些方式会创建 BFC ？
通过以下方式，能创建一个 BFC 规范的布局（根据我熟悉的程度简单划分几类，如下）：
平时常用
- 根元素是 html
- 设置 float 的元素（脱离文档流）
- position: absolute | fixed（脱离文档流）
- block 元素设置 overflow （非 visible，内容不被加工处理，直接显示）
- display: inline-block
- display: flex | inline-flex
- display: grid | inline-grid
不常用（table 系）
- display: table-cell（table 单元格 cell 默认为此样式）
- display: table-caption（table caption 默认为此样式）
- display: table, table-row, table-row-group, table-header-group, table-footer-group
不常用
- display: flow-root
- 设置 contain: layout, content, paint 的元素
- column-count or column-width 不为 auto 的元素（包括 column-count: 1）
- column-span: all
实际应用举例（摘自 MDN）
通过几个例子，感性的理解下 BFC 在实际场景中的作用：
margin 塌陷
首先我们知道当在相邻的块级元素的 margin 会发生合并现象（称为：外边距折叠）
通常会发生在：相邻元素，父子元素 margin 接触处，或者一个空的块级元素。
注意到两个 div 之间的 margin 边距合并成了一个。