【CSS】什么是文档流、什么是BFC，怎么触发BFC，BFC 有什么应用场景

本文主要是介绍【CSS】什么是文档流、什么是BFC，怎么触发BFC，BFC 有什么应用场景，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

什么是文档流

1. 文档流是 html 元素的排列方式
2. 文档流分为
   1. 标准文档流【格式化上下文】
      1. 它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间
      2. 元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行。块级元素则会被渲染为完整的一个新行
      3. 所有元素默认都是普通流定位
   2. 绝对定位
      1. 在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。
   3. 浮动 float
      1. 在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。

什么是BFC

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。描述页面上的块级盒子是如何摆放和布局的。

在 BFC 中，每个盒子都按照以下规则来放置：

1. 在 BFC 内的盒子会从包含块的顶部开始垂直地一个接一个地排列，形成一个垂直的盒子堆叠。
2. 盒子在垂直方向上的边距会发生重叠，但是与其它 BFC 中的盒子的边距不会重叠。
3. BFC 的区域不会与浮动元素的盒子重叠，保证了浮动元素不会覆盖 BFC 中的内容。
4. BFC 的区域不会与外部的容器发生相互影响，使得 BFC 内部的元素对外部布局不产生影响，同时也不受外部影响。

触发 BFC 的条件包括：

1. 根元素或包含根元素的元素
2. 浮动元素（元素的 float 不是 none）
3. 绝对定位元素（元素的 position 为 absolute 或 fixed）
4. 行内块（元素的 display 为 inline-block）【常用】
5. 表格单元格（元素的 display 为 table-cell）
6. 表格标题（元素的 display 为 table-caption）
7. overflow 不为 visible 的块元素【常用】
8. 弹性元素【元素的 display 为 flex inline-flex元素的直接子元素】

BFC 有什么应用场景

1. 自适应两列布局

2. 防止外边距重叠

3. 父子元素的外边距重叠

   1. 给父元素触发 bfc

   2. 给父元素增加 border

   3. 给父元素添加 padding

4. 清除浮动

   1. 解决令父元素高度坍塌问题

5. 防止文字环绕

6. 垂直居中

   1. 通过将容器设为 BFC，并设置其为 flex 或 grid 布局，可以实现内部元素的垂直居中。

这篇关于【CSS】什么是文档流、什么是BFC，怎么触发BFC，BFC 有什么应用场景的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---