BFC 块级格式化上下文
BFC 的触发条件及常见应用场景
问题
什么是 BFC？如何触发 BFC？BFC 有哪些实际应用？
解答
什么是 BFC
BFC（Block Formatting Context）是一个独立的渲染区域，内部元素的布局不会影响外部元素。
触发条件
以下任一条件都会创建 BFC：
float不为noneposition为absolute或fixeddisplay为inline-block、flex、grid、table-cell等overflow不为visible（常用hidden或auto）- 根元素
<html>
应用一：清除浮动
浮动元素会导致父容器高度塌陷，触发 BFC 可以包含浮动元素。
<style>
.container {
border: 2px solid #333;
/* 触发 BFC，包含浮动子元素 */
overflow: hidden;
}
.float-box {
float: left;
width: 100px;
height: 100px;
background: #4a90d9;
}
</style>
<div class="container">
<div class="float-box"></div>
<!-- 父容器现在能正确包裹浮动元素 -->
</div>应用二：防止 margin 重叠
相邻块级元素的垂直 margin 会合并，将元素放入不同的 BFC 可以阻止合并。
<style>
.box {
width: 100px;
height: 100px;
background: #4a90d9;
margin: 50px;
}
.bfc-wrapper {
/* 创建新的 BFC */
overflow: hidden;
}
</style>
<!-- 没有 BFC：两个 box 的 margin 会重叠，间距为 50px -->
<div class="box"></div>
<div class="box"></div>
<!-- 有 BFC：间距为 100px（50 + 50） -->
<div class="box"></div>
<div class="bfc-wrapper">
<div class="box"></div>
</div>应用三：自适应两栏布局
BFC 区域不会与浮动元素重叠，利用这个特性实现两栏布局。
<style>
.sidebar {
float: left;
width: 200px;
height: 300px;
background: #4a90d9;
}
.main {
/* 触发 BFC，不与左侧浮动元素重叠 */
overflow: hidden;
height: 300px;
background: #67c23a;
}
</style>
<div class="sidebar">固定宽度侧边栏</div>
<div class="main">自适应宽度主内容区</div>关键点
- BFC 是独立的布局区域，内部布局不影响外部
- 常用
overflow: hidden触发 BFC - BFC 可以包含浮动元素，解决高度塌陷
- 不同 BFC 之间的 margin 不会重叠
- BFC 区域不会与浮动元素重叠，可用于自适应布局
目录