当前位置： 首页 > news >正文

什么是CSS中的BFC？

news 2026/5/23 12:36:14

①什么是BFC

BFC 全称：Block Formatting Context， 名为 “块级格式化上下文”。

W3C官方解释为：BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，Block Formatting Context提供了一个环境，HTML在这个环境中按照一定的规则进行布局。

简单来说就是，BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。那么怎么使用BFC呢，BFC可以看做是一个CSS元素属性

②怎么触发BFC

1、根元素：HTML元素
2、浮动：floa 为 left 或 right 的时候
3、定位：position 为 absolute（绝对定位）或fixed（固定定位）
4、溢出：overflow 不为 visible时（不对溢出部分做处理）
5、修改元素类型：display 为 inline-block、 flex,、inline-flex、grid、inline-grid、table-cell等等
具体例子：

  • overflow: hidden
  • display: inline-block
  • position: absolute
  • position: fixed
  • display: table-cell
  • display: flex

③BFC布局规则

        内部的Box会在垂直方向，一个接一个地放置。Box垂直方向的距离由margin决定。

        属于同一个BFC的两个相邻Box的margin会发生重叠，每个元素的margin box的左边， 与包含块border box的左边相接触 ( 对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
        BFC的区域不会与float box重叠,而是紧贴浮动元素。
        BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

        计算BFC的高度时，浮动元素也参与计算

总结来说就是：

  • BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列
  • BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签
  • 垂直方向的距离由margin决定， 属于同一个BFC的两个相邻的标签外边距会发生重叠
  • 计算BFC的高度时，浮动元素也参与计算

④BFC的应用场景

（1）清除盒子垂直方向上外边距合并（垂直margin合并问题，或者是margin塌陷问题）

        盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子垂直方向的margin会发生重叠。

解决方法：
        根据属于同一个BFC的两个相邻盒子垂直方向的margin会发生重叠的性质，可以给其中一个盒子再包裹一个盒子父元素，并触发其BFC功能（例如添加overflow:hidden;）这样垂直方向的两个盒子就不在同一个BFC中了，因此也不会发生垂直外边距合并的问题了。

案例：

<!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"><title>Document</title><style>.box {margin: 10px;width: 100px;height: 100px;background: #000;}</style>
</head>
<body><div class="container"><div class="box"></div><div class="box"></div></div>
</body>
</html>

效果：

         可以看到上面我们为两个盒子的margin外边距设置的是10px，可结果显示两个盒子之间只有10px的距离，这就导致了margin塌陷问题，这时margin边距的结果为他们的最大值，而不是他们的合，为了解决此问题可以使用BFC规则（为元素包裹一个盒子形成一个完全独立的空间，做到里面元素不受外面布局影响），或者简单粗暴方法一个设置margin，一个设置padding。

修改代码：

<!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"><title>Margin边距重叠</title><style>.box {margin: 10px;width: 100px;height: 100px;background: #000;}</style>
</head>
<body><div class="container"><div class="box"></div><p><div class="box"></div></p></div>
</body>
</html>

效果：

 

（2）在子元素设置成浮动元素的时候，会产生父元素高度塌陷的问题。（清除内部浮动）

解决方法：
        给父元素设置overflow:hidden；的时候会产生BFC
        由于在计算BFC高度时，自然也会检测浮动的子盒子高度。所以当子盒子有高度但是浮动的时候，通过激发父盒子的BFC功能，会产生清除浮动的效果。

案例：

<!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"><title>高度塌陷</title><style>.box {margin: 100px;width: 100px;height: 100px;background: red;float: left;}.container {background: #000;}</style>
</head>
<body><div class="container"><div class="box"></div><div class="box"></div></div>
</body>
</html>

效果图：

        可以看到上面效果给box设置完float结果脱离文档流，使container高度没有被撑开，从而背景颜色没有颜色出来，解决此问题可以给container触发BFC，上面我们所说到的触发BFC属性都可以设置。

修改代码：

<!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"><title>高度塌陷</title><style>.box {margin: 100px;width: 100px;height: 100px;background: red;float: left;}.container {background: #000;display: inline-block;}</style>
</head>
<body><div class="container"><div class="box"></div><div class="box"></div></div>
</body>
</html>

效果：

 

（3）两栏布局

<!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"><title>两栏布局</title><style>div {width: 200px;height: 100px;border: 1px solid red;}</style>
</head>
<body><div style="float: left;">两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局</div><div style="width: 300px;">我是蛙人，如有帮助请点个赞叭，如有帮助请点个赞叭，如有帮助请点个赞叭，如有帮助请点个赞叭，如有帮助请点个赞叭，如有帮助请点个赞叭</div>
</body>
</html>

效果：

         可以看到上面元素，第二个div元素为300px宽度，但是被第一个div元素设置Float脱离文档流给覆盖上去了，解决此方法我们可以把第二个div元素设置为一个BFC。

<!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"><title>两栏布局</title><style>div {width: 200px;height: 100px;border: 1px solid red;}</style>
</head>
<body><div style="float: left;">两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局</div><div style="width: 300px;display:flex;">我是蛙人，如有帮助请点个赞叭，如有帮助请点个赞叭，如有帮助请点个赞叭，如有帮助请点个赞叭，如有帮助请点个赞叭，如有帮助请点个赞叭</div>
</body>
</html>

效果：

 

结语

谢谢你读完本篇文章，希望对你能有所帮助，如有问题欢迎各位指正。

参考：

https://blog.csdn.net/weixin_45003732/article/details/127827289

https://blog.csdn.net/weixin_45003732/article/details/127827289

相关文章：

什么是CSS中的BFC？

①什么是BFC BFC 全称&#xff1a;Block Formatting Context&#xff0c; 名为 “块级格式化上下文”。 W3C官方解释为&#xff1a;BFC它决定了元素如何对其内容进行定位&#xff0c;以及与其它元素的关系和相互作用&#xff0c;当涉及到可视化布局时&#xff0c;Block Forma…...

编程日记 2023/8/27 10:37:04

探讨uniapp的页面问题

1 新建页面 uni-app中的页面&#xff0c;默认保存在工程根目录下的pages目录下。 每次新建页面&#xff0c;均需在pages.json中配置pages列表&#xff1b; 未在pages.json -> pages 中注册的页面&#xff0c;uni-app会在编译阶段进行忽略。pages.json的完整配置参考&am…...

编程日记 2023/8/27 10:36:02

【跨域异常】

想在前端使用vue获取后端接口的数据&#xff0c;但是报了跨域异常&#xff0c;如下图所示。 一种解决的方式是&#xff0c;在后端Controller接口上加上CrossOrigin&#xff0c;从后端解决跨域问题。 还要注意前端请求的url要加上协议&#xff0c;比如http://...

编程日记 2023/8/27 10:35:01

上市公司环境信息披露（含环境负债、管理、监管、业绩与治理披露，2008-2022）

数据简介&#xff1a;环境信息披露是督促企业履行社会责任&#xff0c;推动国民经济社会全面绿色转型和加快实现“双碳”目标的重要抓手。环境信息披露理论缘起于社会责任理论&#xff0c;发展于合法性理论、利益相关者理论、制度理论和信号传递理论等。 结合相关理论&#xf…...

编程日记 2023/8/27 10:34:00

网络基础入门

认识协议 协议其实是一种约定 网络协议初识&#xff1a; 1.内核上以结构体形式呈现 2.操作系统要进行协议管理--先描述&#xff0c;在管理 3.协议的本质是软件&#xff0c;软件是可以分层的&#xff0c;&#xff08;联系C继承多态的知识 &#xff09; 可以参考 &#xff1…...

编程日记 2023/8/27 10:32:59

Oracle工具之SQLLDR

1. 什么是SQLLDR SQLLDR是Oracle服务端自带的工具&#xff0c;用于快速导入大批量数据。 2. 常规路径加载/直接路径加载 sqlldr导入有两种模式&#xff0c;常规路径加载和直接路径加载&#xff0c;默认使用常规路径加载&#xff0c;当directy或者directtrue时&#xff0c;使用…...

编程日记 2023/8/27 10:31:56

探索pytest：Python自动化测试的新境界

在当今的软件开发领域&#xff0c;测试已经不仅仅是一个简单的步骤&#xff0c;而是确保软件质量的核心环节。Python&#xff0c;作为全球最受欢迎的编程语言之一&#xff0c;拥有丰富的测试框架和工具。而在这其中&#xff0c;pytest无疑是最受欢迎和最具影响力的一个。本文将…...

编程日记 2023/8/27 10:30:55

K8s学习笔记4

场景&#xff1a; 项目研发部门最近要进行应用运行基础环境迁移&#xff0c;需要由原先的虚拟机环境迁移到K8s集群环境中&#xff0c;以便应对开发快速部署和快速测试的需要&#xff0c;因此&#xff0c;需要准备一套可以用于开发需求的K8s集群&#xff0c;但是对于仅有容器基…...

编程日记 2023/8/27 10:29:54

Kafka 学习笔记

&#x1f600;&#x1f600;&#x1f600;创作不易&#xff0c;各位看官点赞收藏. 文章目录 Kafka 学习笔记1、消息队列 MQ2、Kafka 下载安装2.1、Zookeeper 方式启动2.2、KRaft 协议启动2.3、Kafka 集群搭建 3、Kafka 之生产者3.1、Java 生产者 API3.2、Kafka 生产者生产分区3…...

编程日记 2023/8/27 10:28:52

vue实现表格的动态高度

需求：表格能够根据窗口的大小自动适配页面高度 防抖和节流函数的使用场景是当需要对频繁触发的事件进行限制时，例如： 防抖函数常用于限制用户在短时间内多次触发某一事件，例如搜索框输入并搜索，当用户一直在输入时，我们可以使用防抖函数来避免多次请求搜索结果，减轻服…...

编程日记 2023/8/27 10:27:51

HodlSoftware-免费在线PDF工具箱 加解密PDF 集成隐私保护功能

HodlSoftware是什么 HodlSoftware是一款免费在线PDF工具箱&#xff0c;集合编辑 PDF 的简单功能&#xff0c;可以对PDF进行加解密、优化压缩PDF、PDF 合并、PDF旋转、PDF页面移除和分割PDF等操作&#xff0c;而且工具集成隐私保护功能&#xff0c;文件只在浏览器本地完成&…...

编程日记 2023/8/27 10:26:49

09 数据库开发-MySQL

文章目录 1 数据库概述2 MySQL概述2.1 MySQL安装2.1.1 解压&添加环境变量2.1.2 初始化MySQL2.1.3 注册MySQL服务2.1.4 启动MySQL服务2.1.5 修改默认账户密码2.1.6 登录MySQL 2.2 卸载MySQL2.3 连接服务器上部署的数据库2.4 数据模型2.5 SQL简介2.5.1 SQL通用语法2.3.2 分类…...

编程日记 2023/8/27 10:25:48

QT通过ODBC连接GBase 8s数据库（Windows）示例

示例环境&#xff1a; 操作系统&#xff1a;Windows 10 64位数据库及CSDK版本&#xff1a;GBase 8s V8.8_3.0.0_1 64位QT&#xff1a;5.12.0 64位 1&#xff0c;CSDK安装及ODBC配置 1.1&#xff0c;免安装版CSDK 下载免安装版的CSDK驱动&#xff0c;地址&#xff1a;https:…...

编程日记 2023/8/27 10:24:45

Java-三个算法冒泡-选择排序，二分查找

Java算法&#xff1a; 冒泡排序; 解析&#xff1a;将前后两个数对比&#xff0c;将大的数&#xff08;或小的&#xff09;调换至后面&#xff0c;每轮将对比过程中的最大&#xff08;或最小&#xff09;数&#xff0c;调到最后面。每轮对比数减一&#xff1b;初始对比数为数组…...

编程日记 2023/8/27 10:23:44

docker版jxTMS使用指南：使用jxTMS提供数据

本文讲解了如何jxTMS的数据访问框架&#xff0c;整个系列的文章请查看&#xff1a;docker版jxTMS使用指南&#xff1a;4.4版升级内容 docker版本的使用&#xff0c;请查看&#xff1a;docker版jxTMS使用指南 4.0版jxTMS的说明&#xff0c;请查看&#xff1a;4.0版升级内容 4…...

编程日记 2023/8/27 10:22:43

阿里 MySQL 规范

阿里 MySQL 规范 1. 建库建表规范 【推荐】库名与应用/服务名称尽量一致。 【强制】表名不使用复数名词。 说明&#xff1a;表名应该仅仅表示表里面的实体内容&#xff0c;不应该表示实体数量&#xff0c;对应于DO类名也是单数形式&#xff0c;符合表达习惯。 【推荐】表的…...

编程日记 2023/8/27 10:21:42

C++ Primer阅读笔记--动态内存和智能指针

​​​​​​​ 目录 1--动态内存管理 2--shared_ptr类 2-1--make_shared 函数 2-2--引用计数 2-3--get 3--new和delete 4--shared_ptr和new结合使用 5--unique_ptr 6--weak_ptr 1--动态内存管理 new&#xff1a;在动态内存中为对象分配空间并返回一个指向该对象的指…...

编程日记 2023/8/27 10:20:41

git分支管理策略

git的基础操作以及常用命令在上篇博客哦~ git原理与基本使用 1.分支管理 1.主分支 在版本回退⾥&#xff0c;我们已经知道&#xff0c;每次提交&#xff0c;Git都把它们串成⼀条时间线&#xff0c;这条时间线就可以理解为是⼀个分⽀。截⽌到⽬前&#xff0c;只有⼀条时间线&…...

编程日记 2023/8/27 10:19:40

IntelliJ IDEA maven配置，设置pom.xml的配置文件

IntelliJ IDEA项目&#xff0c;选择 文件 设置&#xff0c;弹窗 构建、执行、部署 构建工具 Maven就可以 maven配置好以后&#xff0c;在pom.xml的配置文件中就可以设置对应的jar包了&#xff0c;这样构建的时候自动需要的jar&#xff0c;在项目中导入即 settings.xml文件apa…...

编程日记 2023/8/27 10:18:39

C#__使用Thread启动线程和传输数据

class Program{static void Test(){Console.WriteLine("Start……");Thread.Sleep(2000); // 1s等于1000ms&#xff0c;暂停2sConsole.WriteLine("end");}static void Download(Object ob){string str ob as string; // 遍历传递过来的ob字符串Console.Wr…...

编程日记 2023/8/27 10:17:38

深度学习实验十大模式与反模式：工业级可复现性实战指南

1. 项目概述&#xff1a;为什么这十个模式与反模式值得你花一整周反复咀嚼 “Ten Patterns and Antipatterns of Deep Learning Experimentation”——这个标题乍看像一篇学术综述&#xff0c;但在我带过27个工业级AI项目、亲手调试过412次模型训练失败日志、在三个不同行业的M…...

编程新知 2026/5/23 12:28:56

限流算法详解 - 滑动窗口算法深入理解

滑动窗口算法详解 专门针对滑动窗口算法&#xff0c;从原理到精确限流的实现细节做一个深入剖析。 一、核心思想 固定窗口在时间边界处会出现“计数突跳”&#xff0c;原因是窗口的边界是硬重置的&#xff08;0→1秒末清空&#xff0c;1→2秒初重新计数&#xff09;。 滑动窗口…...

编程新知 2026/5/23 11:31:20

Open WebUI企业级部署指南：全功能AI平台架构与生产环境实践

Open WebUI企业级部署指南&#xff1a;全功能AI平台架构与生产环境实践 【免费下载链接】open-webui User-friendly AI Interface (Supports Ollama, OpenAI API, ...) 项目地址: https://gitcode.com/GitHub_Trending/op/open-webui Open WebUI是一个功能强大的自托管A…...

编程新知 2026/5/23 11:31:02

甲言Jiayan：终极古汉语NLP解决方案，让文言文处理变得简单高效

甲言Jiayan&#xff1a;终极古汉语NLP解决方案&#xff0c;让文言文处理变得简单高效 【免费下载链接】Jiayan 甲言&#xff0c;专注于古代汉语(古汉语/古文/文言文/文言)处理的NLP工具包&#xff0c;支持文言词库构建、分词、词性标注、断句和标点。Jiayan, the 1st NLP toolk…...

编程新知 2026/5/23 11:24:52

基于YOLOv8的AI自瞄项目完整配置指南

基于YOLOv8的AI自瞄项目完整配置指南 【免费下载链接】RookieAI_yolov8 基于yolov8实现的AI自瞄项目 AI self-aiming project based on yolov8 项目地址: https://gitcode.com/gh_mirrors/ro/RookieAI_yolov8 RookieAI_yolov8是一个基于YOLOv8目标检测技术实现的AI自瞄项…...

编程新知 2026/5/23 10:10:16

pprint，一个漂亮打印的 Python 库！

在日常编程中&#xff0c;我们经常需要打印复杂的数据结构——嵌套的字典、列表、JSON 响应、配置对象等。使用普通的 print() 会将整个结构挤在一行或简单换行&#xff0c;导致可读性极差&#xff0c;尤其是在调试多层嵌套的 API 返回数据时&#xff0c;简直是一场灾难。pprin…...

编程新知 2026/5/23 9:40:00

LSTM比特币价格预测：特征工程驱动的交易信号生成器

1. 项目概述&#xff1a;为什么用RNN/LSTM做比特币价格预测&#xff0c;而不是随便套个模型&#xff1f;我从2018年开始接触加密资产量化分析&#xff0c;最早用的是ARIMA和随机森林——前者对趋势拐点完全失灵&#xff0c;后者在训练集上准确率92%&#xff0c;一到实盘就跌破6…...

编程新知 2026/5/23 9:05:31

Failed to initialize NVML: Driver/library version mismatch:一次驱动报错

Failed to initialize NVML: Driver/library version mismatch:一次驱动报错 引子:一个看似简单的系统就卡爆了。嗯。我的系统就会卡爆了。你的系统可能还是但我觉得有可能是我的。这什么&#xff1f;啊&#xff1f;受不了我的大 U 盘了。报错 那天我在自己的 Ubuntu 工作站上准…...

编程新知 2026/5/23 7:09:46

Python 的 C 扩展，本质上就是“去中心化的 COM”

全球占比25%的第一编程语言&#xff1a;Python 的内存管理&#xff1a;用的是引用计数&#xff08;Reference Counting&#xff09;加垃圾回收。C 库&#xff08;如 NumPy&#xff09;在运行过程中&#xff0c;会直接去修改 Python 对象的引用计数.这套做法恰好是微软原来最好的…...

编程新知 2026/5/23 6:00:56

在CentOS7服务器上装Win10双系统，我踩过的坑和保姆级避坑指南

在CentOS7服务器上部署Win10双系统的实战避坑指南 当开发环境需要同时运行Linux服务与Windows专属应用时&#xff0c;双系统成为刚需。但服务器与家用PC的硬件架构差异&#xff0c;会让安装过程暗藏无数"深坑"。本文将分享我在生产环境中为戴尔PowerEdge R740服务器部…...

编程新知 2026/5/23 5:33:57