CSS中BFC的渲染规则有哪些？有哪些应用场景？

艾光远

已于 2025-08-09 00:27:12 修改

阅读量291

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Interview 文章标签：前端开发 CSS 面试

于 2021-11-14 00:04:35 首次发布

本文链接：https://blog.csdn.net/weixin_40629244/article/details/121312239

Interview 专栏收录该内容

59 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了CSS中的Block Formatting Context（BFC）渲染规则，包括边距重叠、不与浮动元素重叠、独立容器特性以及浮动元素计算高度等。同时探讨了BFC在防止父元素高度塌陷和解决外边距折叠问题上的应用场景，通过实例代码展示了解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. BFC渲染规则

BFC垂直方向边距重叠
BFC的区域不会与浮动元素的box重叠
BFC是一个独立的容器，外面的元素不会影响里面的元素
计算BFC高度的时候浮动元素也会参与计算

2. BFC的应用场景

2.1. 防止浮动导致父元素高度塌

现有如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initia

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

艾光远

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

订阅专栏

inline-block间距产生的原因，去除inline-block间距的方法？及这个问题未来可能的解决方向。

IT修真院：初学者转行到互联网的聚集地

05-13

942

这里是修真院web小课堂，每篇分享文从【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】八个方面深度解web知识/技能，本篇分享的是：【 inline-block间距产生的原因，去除inline-block间距的方法？及这个问题未来可能的解决方向。】大家好，我是IT修真院深圳分院第3期的学员，一枚正直纯洁善良的前端程序员，今天给大家...

软文推广页面

m0_73229744的博客

10-25

1078

（1）标题分别使用和标签，其中h1表示一级标题，h2表示二级标题。（2）标签分别应用了名称为“书法.ttf”的字体，并且添加文字阴影。（3）.middle和.footer中的字体图标使用标签引起对应的class值来完成。（4）在标签中定义HTML5和CSS3描述信息。

参与评论您还未登录，请先登录后发表或查看评论

【HTML+CSS】之CSS布局

qq_37086980的博客

08-06

517

常用布局方式 table 表格布局 float 浮动 + margin inline-block 布局 flexbox布局 1.flexbox 布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewp

display:inline-block带来的问题及解决办法

weixin_30549175的博客

01-11

315

在日常工作中，会经常遇到两个或多个元素并排排列的效果，以前会使用float等实现，float虽然方便好用，但是需要清除浮动，有时会带来意想不到的bug 而且在移动端是不推荐使用float的，所以使用display:inline-block是一个不错的选择。但是display:inline-block有时也会带来各种问题，下面是我遇到的一些问题并附带解决办法（有的问题目前我还没有找到...

项目2-2软文推广页面

Mr_jianghanlin的博客

03-17

4455

*## 软文推广页面首先给大家看效果图：背景是我自己随便找了一张背景图黄颜色一种比较亮的图，所以文字应该选取黑色这样看起来使人舒服：下面来详细说说上述图的效果如何做出来的：首先将整个图可以看成是一个section标签，然后在进行嵌套div的盒子标前签。这个网页页面一共用到了以下类容首先是设置了一一种给新的字体（One Web, Any Device）属性如下： List item @f...

10分钟理解CSS BFC原理及其应用

09-27

CSS BFC（Block Formatting Context，块级格式化上下文）是Web页面布局中的一个重要概念，它定义了一个独立的渲染区域，具有自己特定的布局规则。理解BFC的原理对于解决CSS布局问题和优化页面样式有着重要作用。 ...

BFC 深度解析：是什么、触发与应用场景都有哪些？

向着太阳迎着光

12-03

1065

BFC是一个独立的布局区域，能帮助解决浮动清除、外边距重叠、元素重叠等问题。通过floatpositiondisplay和overflow等方式触发BFC。在实际项目中，BFC的应用可以简化布局，增强可维护性。

Web布局中BFC(块级格式化上下文)的应用与解决方案

最新发布

02-11

BFC是一个独立布局环境，在该环境中元素按照一定规则进行排布而内外互不干扰，并列出若干布局特性如内部元素依次垂直排列，垂直方向上的距离取决于边缘空白（Margin），左侧贴合外部左边框而不受其他浮动静态盒的...

css实现上中下布局（上下固定，中间自适应）

闲云野鸟的博客

04-21

7338

先上效果图：实现方法：方法一：这个最简单，利用css中vh单位和calc() 函数使用场景：页面布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width

使用display:inline-block 会产生什么问题？解决方法

qq_45886500的博客

08-27

336

当两个inline-block元素放在一块的时候会产生一个空白间隙产生原因是元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据CSS中white-space属性的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。解决办法 1、给子元素添加float:left属性 .inline1,.inline2 { displ

使用display:inline-block会产生什么问题？解决方法？

Bliss_妍的博客

08-16

778

问题: 两个display：inline-block元素放到一起会产生一段空白。产生空白的原因：元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据CSS中white-space属性的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。解决办法： 1. 将子元素标签的结束符和下一个标签的开始符写在同一行或把所有子标签写在同一行

css实现上下固定中间自适应

weixin_45825917的博客

03-12

830

css

CSS之布局系列--上中下布局(上下固定，中间自适应)--方法/实例

IT利刃出鞘的博客

11-28

8782

本文用示例介绍CSS三行布局的方案。三行布局，即：上、中、下。有两种方案：1.上下固定，中间自适应；2.中间固定，上下自适应。本文介绍第1种方案。两边固定，中间自适应，一共有如下几种方案： flex布局（推荐）网格布局（grid) vh+calc() 表格布局（table）（不推荐）绝对定位布局（不推荐）上下固定，中间自适应，就意味着中间要占满。所以大部分方案中，其父元素都要设置：height: 100%

CSS实现上下固定中间自适应布局

syx_12的博客

08-17

293

废话不多数哦，直接上代码！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit

使用display: inline-block;遇到的问题及解决

weixin_30558305的博客

12-10

575

1、使用display: inline-block;布局div会使两个字div中间产生间隙，解决办法有多种: ①可以不换行的将两个div书写在一行，因为换行也会占dom文档流。 ②可以在父元素中加上font-size: 0;也能消除中间间隙。 2、有些时候两个使用display:inline-block;的两个子元素可能会出现上下错位的情况，也就是没有上上部对齐，发生这种问题的原因是inli...

【项目2-2】软文推广页面

weixin_30492601的博客

07-03

1402

前导知识点 1 字体属性合写选择器:{font；font-style || font-weight || font-size || line-height || font-family}; text-shadow 设置文本阴影选择器{text-shadow: h-shadow v-shadow blur color;} h-shadow水平阴影 v-s...

使用display:inline-block会产生什么问题？

qq_46179838的博客

02-16

312

一、问题当我们写出两个方块盒子时，系统知道div是块级元素，会独占一行，所以这是我们就需要让块级元素变成行级块元素（使用两个display；inline-block;），但此时又会引发一个新的问题：元素放到一起会中间产生一段空白。代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset=...

css布局（上下固定，中间自适应）

u011391655的博客

06-20

8774

要实现页面的上下固定，中间自适应： 1：上下固定高度 .header{ background-color: #f55d54; width: 100%; height: 50px; display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; pos

CSS之左右固定，中间自适应

wuChiSha的博客

03-28

3879

左右固定，中间自适应应该是CSS中常见的布局，或者说是CSS中经典的布局，百度查找具体的实现方式，自己敲代码时，发现了一个特别神奇的现象：右边的那个div老被挤下来，如图：一句一句对比百度到的代码，完全一样呀，为什么会这样？一遍又一遍的查找自己代码的不同之处，奔溃蒙圈……索性把人家的代码复制粘贴，我就不信，还没效果！奇迹出现了，竟然OK了，达到预期效果了！凭什么呀！ ...

理解CSS中的BFC与IFC：原理与应用解析

"本文主要探讨了CSS中的BFC（Block Formatting Context）和IFC（Inline Formatting Context）的概念、原理以及实际应用。BFC是CSS布局中的一个重要概念，它定义了一个独立的渲染区域，影响着其内部元素的定位和外部...