TODO

CSS

- [ ] bfc? - [ ] 回流和重绘？

• 移动端1px问题详解原理了解
• TS相关问题整理
• 流式传输相关整理
• 图片，文档，excel,视频，音频等文件处理，了解基本信息

什么是 BFC？有什么作用？

BFC（Block Formatting Context，块级格式化上下文）是 Web 页面中一个独立的渲染区域，内部的块级元素按照特定规则布局，且不会与外部元素相互影响。

它的核心作用有三个：

1. 包含浮动元素：解决父容器高度塌陷问题（比如子元素浮动后，父容器高度变为 0）；
2. 阻止外边距重叠：让相邻块级元素的上下 margin 正常叠加，而不是取最大值；
3. 防止文字环绕浮动元素：让非浮动元素形成独立区域，不与浮动元素重叠。

创建 BFC 的常见方式包括：

• display: flow-root（现代推荐，无副作用）
• overflow: hidden/auto
• float: left/right
• position: absolute/fixed
• display: flex/grid 等

在实际开发中，我通常用 display: flow-root 来包裹浮动布局，替代传统的 clearfix，代码更简洁、语义更清晰。

Q：为什么 overflow: hidden 能创建 BFC？

因为当 overflow 不为 visible 时，浏览器需要确定内容是否溢出，因此会创建一个新的 BFC 来计算内部尺寸和布局。

Q：BFC 和 IFC 有什么区别？

BFC 是块级格式化上下文，用于块级元素垂直排列；IFC（Inline Formatting Context）是行内格式化上下文，用于文本、行内元素的水平排列。

Q：Flex 容器会创建 BFC 吗？

是的，Flex 容器会创建一个新的格式化上下文（FFC），它具备 BFC 的特性（如包含浮动、阻止 margin 重叠），但子元素遵循 Flex 布局规则。

📌 记忆口诀（方便复述）

“一独二包三防”

• 一独：独立渲染区域
• 二包：包含浮动、包裹子元素
• 三防：防塌陷、防重叠、防环绕