BFC块级格式化上下文

最新推荐文章于 2025-08-18 20:44:42 发布

原创最新推荐文章于 2025-08-18 20:44:42 发布 · 391 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

前端面试同时被 2 个专栏收录

34 篇文章

订阅专栏

Css3 学习之路

23 篇文章

订阅专栏

BFC (Block Formatting Context) 块级格式化上下文的要点如下：

什么是BFC：

它是页面中的一块独立渲染区域
内部元素的布局不会影响外部
可以看作是一个独立的容器

触发BFC的条件：

/* 方法1：浮动 */
.bfc {
  float: left/right;
}

/* 方法2：定位 */
.bfc {
  position: absolute/fixed;
}

/* 方法3：overflow */
.bfc {
  overflow: hidden/auto/scroll;
}

/* 方法4：display */
.bfc {
  display: inline-block/flex/grid/table-cell;
}

/* 方法5：根元素 */
html {
  /* html本身就是BFC */
}

BFC的特性：

<!-- 1. 内部的浮动元素会参与高度计算 -->
<div style="overflow: hidden;">
  <div style="float: left; height: 100px;"></div>
</div>

<!-- 2. 防止外边距重叠 -->
<div style="overflow: hidden;">
  <p style="margin: 20px 0;">段落1</p>
</div>
<div style="overflow: hidden;">
  <p style="margin: 20px 0;">段落2</p>
</div>

<!-- 3. 防止文字环绕 -->
<div>
  <div style="float: left;">浮动元素</div>
  <div style="overflow: hidden;">文本内容</div>
</div>

常见应用场景：

/* 清除浮动 */
.clearfix {
  overflow: hidden;
}

/* 防止边距重叠 */
.wrapper {
  overflow: hidden;
}

/* 自适应两栏布局 */
.layout {
  .left {
    float: left;
    width: 200px;
  }
  .right {
    overflow: hidden; /* 触发BFC */
  }
}

实际应用示例：

<!-- 两栏自适应布局 -->
<div class="container">
  <div class="sidebar">侧边栏</div>
  <div class="main">主内容</div>
</div>

<style>
.container {
  overflow: hidden;
}
.sidebar {
  float: left;
  width: 200px;
}
.main {
  overflow: hidden; /* 创建BFC */
}
</style>

<!-- 防止边距重叠 -->
<div class="card">
  <div class="item">项目1</div>
  <div class="item">项目2</div>
</div>

<style>
.card {
  overflow: hidden;
}
.item {
  margin: 20px 0;
}
</style>

注意事项：

overflow:hidden可能会隐藏内容
float会影响文档流
position:absolute会脱离文档流
不同方式创建BFC可能有不同副作用

使用建议：

优先使用overflow:hidden
注意性能影响
考虑替代方案(如Flex)
理解副作用

现代布局中的应用：

/* 使用Flex替代传统BFC布局 */
.container {
  display: flex;
}
.sidebar {
  width: 200px;
}
.main {
  flex: 1;
}

/* Grid布局 */
.container {
  display: grid;
  grid-template-columns: 200px 1fr;
}