BFC--块级格式化上下文

BFC

BFC是Block Formatting Context，也就是块级格式化上下文，是用于布局块级盒子的一块渲染区域。

简单来说就是，BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。那么怎么使用BFC呢，BFC可以看做是一个CSS元素属性

文档流其实分为普通流、定位流和浮动流三种，普通流其实就是指BFC中的FC，也即格式化上下文。

普通流：元素按照其在 HTML 中的先后位置从上到下、从左到右布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行。

格式化上下文：页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用

BFC的几条规则：

  1. BFC 区域内的元素外边距会发生重叠。

  2. BFC 区域内的元素不会与浮动元素重叠。

  3. 计算 BFC 区域的高度时，浮动元素也参与计算。

  4. BFC 区域就相当于一个容器，内部的元素不会影响到外部，同样外部的元素也不会影响到内部。

BFC的应用：

  1. 清除浮动：父元素设置overflow: hidden触发BFC实现清除浮动，防止父元素高度塌陷，后面的元素被覆盖，实现文字环绕等等。
  1. 消除相邻元素垂直方向的边距重叠：第二个子元素套一层，并设置overflow: hidden，构建BFC使其不影响外部元素。
  1. 消除父子元素边距重叠，父元素设置overflow: hidden

触发BFC的方式：

  1. float 不为 none，浮动元素所在的区域就是一个 BFC 区域。
  2. position 的值不是 static 或 relative 的元素所在的区域就是一个 BFC 区域
  3. display为 table-cell 的表格单元格元素所在的区域也是一个 BFC 区域
  4. overflow 不为 visible 的元素所在的区域也是一个 BFC 区域

这里简单列举几个触发BFC使用的CSS属性

1
2
3
4
5
6
overflow: hidden
display: inline-block
position: absolute
position: fixed
display: table-cell
display: flex

参考文章

前端面经

面试官：请说说什么是BFC？大白话讲清楚