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

什么是CSS中的BFC？

news 2026/3/30 13:20:35

①什么是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

告别手动维护！用DataX-Web搞定MySQL到ClickHouse的增量同步（含时间戳配置）

高效构建MySQL到ClickHouse的增量同步管道&#xff1a;DataX-Web实战指南 在数据驱动的商业环境中&#xff0c;企业每天都会产生海量的业务数据。这些数据通常存储在OLTP系统如MySQL中&#xff0c;但为了进行分析和报表生成&#xff0c;我们需要将这些数据同步到OLTP系统如Clic…...

编程新知 2026/3/30 13:10:30

5个实战技巧深度解析：XUnity.AutoTranslator如何革新Unity游戏多语言体验

5个实战技巧深度解析&#xff1a;XUnity.AutoTranslator如何革新Unity游戏多语言体验 【免费下载链接】XUnity.AutoTranslator 项目地址: https://gitcode.com/gh_mirrors/xu/XUnity.AutoTranslator XUnity.AutoTranslator作为一款创新的开源实时翻译插件&#xff0c;为…...

编程新知 2026/3/30 13:04:25

从IPv4到IPv6迁移实战：在eNSP里排查那些容易被忽略的安全配置（避坑指南）

从IPv4到IPv6迁移实战&#xff1a;eNSP环境下的安全配置深度排查指南 当企业网络从IPv4向IPv6过渡时&#xff0c;工程师们常常会陷入一种"配置惯性"——沿用IPv4时代的安全策略直接套用到IPv6环境。这种思维定式往往会导致网络出现各种"隐形漏洞"。本文将通…...

编程新知 2026/3/30 12:20:12

避开这些坑！海康威视嵌入式HR面常见‘送命题’与应答策略（附真实案例）

海康威视嵌入式HR面试避坑指南&#xff1a;6类高频"送命题"拆解与实战话术 在技术岗位的招聘流程中&#xff0c;HR面试往往是最容易被轻视却暗藏最多陷阱的环节。许多嵌入式开发者在技术面表现出色&#xff0c;却在看似轻松的HR面中意外折戟。通过对海康威视近三年嵌…...

编程新知 2026/3/30 11:33:50

Matlab与VeriStand无缝集成：开发环境配置全攻略

1. 环境准备&#xff1a;软件安装与版本匹配 搞过Matlab和VeriStand集成的朋友都知道&#xff0c;最头疼的不是写代码&#xff0c;而是环境配置。我当年第一次尝试时&#xff0c;光软件版本兼容性问题就折腾了两天。这里分享几个血泪教训&#xff1a; 首先Matlab和VeriStand的版…...

编程新知 2026/3/30 10:59:31

在国产麒麟V10系统上，用kubeadm一步步搭建3个master节点的k8s高可用集群（含haproxy+keepalived配置）

国产麒麟V10系统上构建高可用Kubernetes集群实战指南 在信息技术自主可控的大背景下&#xff0c;国产操作系统正逐步成为企业级基础设施的重要选择。本文将详细介绍如何在麒麟V10&#xff08;Kylin V10&#xff09;操作系统上&#xff0c;从零开始搭建一个包含3个Master节点的高…...

编程新知 2026/3/30 10:47:23

VSCode远程开发终极指南：5分钟搞定跳板机+服务器免密配置（附SSH密钥生成教程）

VSCode远程开发终极指南&#xff1a;5分钟搞定跳板机服务器免密配置 每次连接远程服务器都要输入密码、反复跳转终端&#xff0c;是不是已经让你精疲力尽&#xff1f;作为开发者&#xff0c;我们值得拥有更优雅的远程开发体验。今天要分享的这套方案&#xff0c;不仅能让你在VS…...

编程新知 2026/3/30 10:34:18

3MF格式终极指南：如何在Blender中轻松导入导出3D打印文件

3MF格式终极指南&#xff1a;如何在Blender中轻松导入导出3D打印文件 【免费下载链接】Blender3mfFormat Blender add-on to import/export 3MF files 项目地址: https://gitcode.com/gh_mirrors/bl/Blender3mfFormat 想要在Blender中处理3D打印文件却苦于格式转换&…...

编程新知 2026/3/30 7:29:04

为什么92%的Java边缘项目因Classloader泄漏失败？揭秘3层隔离沙箱设计与实时热替换机制

第一章&#xff1a;Java边缘计算轻量级运行时开发概览边缘计算场景对运行时环境提出严苛要求&#xff1a;低内存占用&#xff08;通常 ≤ 64MB&#xff09;、毫秒级冷启动、有限依赖、原生支持资源约束设备&#xff08;如 ARM64 IoT 网关、工业 PLC&#xff09;。Java 生态传统…...

编程新知 2026/3/30 5:40:25

如何开发Browser MCP自定义工具与资源扩展：完整指南

如何开发Browser MCP自定义工具与资源扩展&#xff1a;完整指南 【免费下载链接】mcp Browser MCP is a Model Context Provider (MCP) server that allows AI applications to control your browser 项目地址: https://gitcode.com/gh_mirrors/mcp16/mcp Browser MCP&a…...

编程新知 2026/3/30 3:39:05