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

什么是CSS中的BFC？

news 2025/9/2 2:24:43

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

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

编程新知 2025/6/17 7:15:49

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/8/31 5:08:06

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

编程新知 2025/7/20 13:01:09

高等数学（下）题型笔记（八）空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

编程新知 2025/8/30 19:47:38

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...

编程新知 2025/9/1 1:11:27

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

编程新知 2025/6/16 23:36:50

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.

ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #&#xff1a…...

编程新知 2025/9/1 16:17:23

android13 app的触摸问题定位分析流程

一、知识点 一般来说，触摸问题都是app层面出问题，我们可以在ViewRootImpl.java添加log的方式定位；如果是touchableRegion的计算问题，就会相对比较麻烦了，需要通过adb shell dumpsys input > input.log指令，且通过打印堆栈的方式，逐步定位问题，并找到修改方案。 问题…...

编程新知 2025/8/22 3:51:52

深入理解Optional：处理空指针异常

1. 使用Optional处理可能为空的集合 在Java开发中&#xff0c;集合判空是一个常见但容易出错的场景。传统方式虽然可行&#xff0c;但存在一些潜在问题&#xff1a; // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...

编程新知 2025/7/20 10:16:36

VisualXML全新升级 | 新增数据库编辑功能

VisualXML是一个功能强大的网络总线设计工具&#xff0c;专注于简化汽车电子系统中复杂的网络数据设计操作。它支持多种主流总线网络格式的数据编辑&#xff08;如DBC、LDF、ARXML、HEX等&#xff09;&#xff0c;并能够基于Excel表格的方式生成和转换多种数据库文件。由此&…...

编程新知 2025/8/24 17:15:24