前端面试题库

介绍BFC

5分钟阅读

BFC (Block Formatting Context) 是CSS中的一个重要概念，指块级格式化上下文。

什么是BFC

BFC是页面中的一块独立渲染区域，内部元素的布局不会影响外部元素，外部元素也不会影响BFC内部的元素。

如何创建BFC

常用方法

/* 1. float不为none */
.bfc {
  float: left; /* 或 right */
}
 
/* 2. position为absolute或fixed */
.bfc {
  position: absolute; /* 或 fixed */
}
 
/* 3. display为inline-block、table-cell、table-caption、flex、grid等 */
.bfc {
  display: inline-block; /* 或其他值 */
}
 
/* 4. overflow不为visible */
.bfc {
  overflow: hidden; /* 或 auto、scroll */
}

其他方法

/* HTML根元素本身就是BFC */
html { }
 
/* display的其他值 */
.bfc {
  display: table-cell;
  display: table-caption;
  display: flex;
  display: inline-flex;
  display: grid;
  display: inline-grid;
  display: flow-root; /* 专门用来创建BFC */
}
 
/* contain属性 */
.bfc {
  contain: layout;
}

BFC的特性和作用

1. 清除浮动

<div class="container">
  <div class="float-child">浮动元素</div>
  <div class="float-child">浮动元素</div>
</div>
.float-child {
  float: left;
  width: 100px;
  height: 100px;
  background: red;
}
 
/* 问题：容器高度塌陷 */
.container {
  border: 2px solid black;
  /* 高度为0，因为子元素浮动 */
}
 
/* 解决：创建BFC */
.container {
  border: 2px solid black;
  overflow: hidden; /* 创建BFC，包含浮动元素 */
}

2. 阻止外边距重叠

<div class="container">
  <div class="box">盒子1</div>
  <div class="box">盒子2</div>
</div>
.box {
  width: 100px;
  height: 100px;
  background: blue;
  margin: 20px 0;
}
 
/* 问题：两个盒子间距只有20px，而不是40px */
 
/* 解决：将其中一个放在BFC中 */
.bfc-wrapper {
  overflow: hidden; /* 创建BFC */
}
<div class="container">
  <div class="box">盒子1</div>
  <div class="bfc-wrapper">
    <div class="box">盒子2</div>
  </div>
</div>

3. 阻止元素被浮动元素覆盖

<div class="float">浮动元素</div>
<div class="normal">普通元素</div>
.float {
  float: left;
  width: 100px;
  height: 100px;
  background: red;
}
 
.normal {
  height: 200px;
  background: blue;
  /* 会被浮动元素覆盖 */
}
 
/* 解决：让普通元素创建BFC */
.normal {
  height: 200px;
  background: blue;
  overflow: hidden; /* 创建BFC，不会被浮动元素覆盖 */
}

实际应用场景

1. 两栏布局

<div class="layout">
  <div class="sidebar">侧边栏</div>
  <div class="main">主内容</div>
</div>
.sidebar {
  float: left;
  width: 200px;
  background: #f0f0f0;
}
 
.main {
  overflow: hidden; /* 创建BFC，形成自适应布局 */
  background: #fff;
}

2. 清除浮动的通用类

.clearfix {
  overflow: hidden; /* 简单的清除浮动 */
}
 
/* 或者使用更专业的方法 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

3. 现代的BFC创建方法

/* 使用display: flow-root专门创建BFC */
.bfc {
  display: flow-root;
}
 
/* 使用现代布局方法 */
.flex-container {
  display: flex; /* 自动创建BFC */
}
 
.grid-container {
  display: grid; /* 自动创建BFC */
}

BFC的判断规则

一个元素形成BFC的条件（满足任一即可）：

  1. 根元素（<html>）
  2. 浮动元素（float不为none）
  3. 绝对定位元素（position为absolute或fixed）
  4. 行内块元素（display为inline-block）
  5. 表格单元格（display为table-cell）
  6. 表格标题（display为table-caption）
  7. 匿名表格单元格元素
  8. overflow值不为visible的块元素
  9. display为flow-root的元素
  10. contain值为layout、content或paint的元素
  11. 弹性元素（display为flex或inline-flex元素的直接子元素）
  12. 网格元素（display为grid或inline-grid元素的直接子元素）

注意事项

副作用

/* overflow: hidden 可能裁剪内容 */
.bfc {
  overflow: hidden; /* 子元素超出会被隐藏 */
}
 
/* float 会改变元素布局 */
.bfc {
  float: left; /* 元素会脱离文档流 */
}
 
/* position: absolute 会改变定位 */
.bfc {
  position: absolute; /* 元素会脱离文档流 */
}

最佳实践

/* 推荐：使用display: flow-root */
.bfc {
  display: flow-root; /* 专门用于创建BFC，无副作用 */
}
 
/* 或者根据具体需求选择 */
.clearfix {
  overflow: auto; /* 相比hidden，auto更安全 */
}
 
.layout {
  display: flex; /* 现代布局，自动创建BFC */
}

BFC是CSS布局的基础概念，理解它有助于解决浮动、外边距重叠等常见布局问题，是前端开发必须掌握的知识点。