BFC(Block Formatting Context,块级格式化上下文)是 CSS 中的一个核心概念,用于控制页面元素的布局规则。它通过创建一个独立的渲染区域,隔离内部元素与外部元素的相互影响,从而解决一些常见的布局问题。
BFC 是什么?
BFC 容器是页面中一个独立的布局环境,其内部的元素按照特定规则排列,不受外部布局的影响。BFC 内的元素不会与外部元素发生布局冲突(如边距重叠、浮动元素覆盖等)。
如何触发 BFC?
为一个元素设置以下 CSS 属性之一,即可将其变为 BFC 容器:
overflow: hidden
、auto
、scroll
(非visible
)display: inline-block
、flex
、grid
、table-cell
等float: left
或float: right
(非none
)position: absolute
或position: fixed
contain: layout
(现代属性)
BFC 的作用
-
防止外边距折叠(Margin Collapse)
普通流中相邻元素的垂直外边距会合并,但 BFC 内部和外部的边距不会合并。
html<div class="parent"> <div class="child"></div> </div>
css.parent { overflow: hidden; /* 触发 BFC */ } .child { margin: 20px; }
-
包含浮动元素
父容器高度塌陷时,触发 BFC 可使父容器包裹浮动子元素。
css.parent { overflow: hidden; /* 触发 BFC */ } .float-child { float: left; }
-
阻止元素被浮动覆盖
BFC 容器不会与浮动元素重叠,常用于实现自适应两栏布局。
css.left { float: left; width: 200px; } .right { overflow: hidden; /* 触发 BFC,避免被左侧浮动覆盖 */ }
BFC 的特性
- BFC 内部的块级元素会垂直排列。
- BFC 的区域不会与浮动元素重叠。
- BFC 内外的布局相互独立。
应用场景
- 解决父元素高度塌陷(清除浮动)。
- 避免相邻元素边距合并。
- 实现复杂布局(如自适应两栏)。