学习呦
17 11月 2025 3 min read

BFC 块级格式化上下文

Written by 米豆

BFC (Block Formatting Context)

概念

MDN定义：Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域

概念很抽象，根据它的作用讲：就是可以让浮动元素的父级元素包括住浮动元素，不会造成高度坍塌

https://static.xuyanshe.club/img/202401310953859.png

上面这个粉色的框就超出外面的父级虚线框了，布局有问题，粉色框是float浮动元素，可以给 “父级虚线框” 添加一个属性

overflow: auto;

之后就变成这样

https://static.xuyanshe.club/img/202401310953678.png

再比如可以使用display: flow-root;

https://static.xuyanshe.club/img/202401310953886.png

变成

https://static.xuyanshe.club/img/202401310953706.png

BFC：根据张鑫旭CSS世界定义，BFC为一个“结界”，外部不能对内部造成什么影响，比如上面使用了overflow: hidden的p标签（那一大段黑色文字）就形成了一个BFC，外部的那个float的浮动元素就对黑色文字造成不了影响

其实这个粉色框float元素也是BFC，不过是粉色框内部而言。同样的，按照BFC的生成规则，黑色文字的BFC也可以用float创建，但破坏性太大了，让元素本来的流体特性没了，变成了包裹性

BFC的生成规则

  • float 的值不为 none
  • overflow 的值为 auto、scroll 或 hidden
  • display 的值为 table-cell、table-caption 和 inline-block 中的任何一个
  • position 的值为 absolute 和 fixed
  • display的值为 flow-root（这个属性是2020 年后开始陆续支持的，可以创建一个 BFC，但是会占用 display属性）

overflow: hidden也不是没有缺点，比如设置了这个属性的BFC，结构是一个父元素包含一个子元素，这个子元素超出父元素的部分就会隐藏

应用

  • margin高度塌陷，父子元素margin-top的合并，可以给父元素创建一个BFC，父元素的margin-top和其内部隔绝，父元素和子元素各自的margin-top就可以生效了
  • 清除浮动的影响，比如说上面的例子。浮动对外部元素和内部元素的影响

其他清除浮动方法

clear属性

clear 属性常用的写法 clear: both，不会和浮动元素相邻，相当于 clear: left|right会自动选择，如果左边有浮动元素，就不会和左边的元素相邻
这个属性不是最优解，因为清除浮动的方法是不与之相邻，有可能会造成布局错位

↑