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

什么是CSS中的BFC？

news 2025/10/28 13:27:34

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

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

编程新知 2025/10/28 2:04:41

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

编程新知 2025/6/11 15:21:26

使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

编程新知 2025/10/1 2:59:48

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

编程新知 2025/8/25 19:12:45

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

编程新知 2025/8/3 2:20:04

PHP 8.5 即将发布：管道操作符、强力调试

前不久&#xff0c;PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5&#xff01;作为 PHP 语言的又一次重要迭代&#xff0c;PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是&#xff0c;借助强大的本地开发环境 ServBay&am…...

编程新知 2025/10/25 9:44:08

DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态

前言 在人工智能技术飞速发展的今天&#xff0c;深度学习与大模型技术已成为推动行业变革的核心驱动力&#xff0c;而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心&#xff0c;系统性地呈现了两部深度技术著作的精华&#xff1a;…...

编程新知 2025/10/21 10:55:51

2.3 物理层设备

在这个视频中&#xff0c;我们要学习工作在物理层的两种网络设备&#xff0c;分别是中继器和集线器。首先来看中继器。在计算机网络中两个节点之间&#xff0c;需要通过物理传输媒体或者说物理传输介质进行连接。像同轴电缆、双绞线就是典型的传输介质&#xff0c;假设A节点要给…...

编程新知 2025/10/28 6:57:18

python基础语法Ⅰ

python基础语法Ⅰ 常量和表达式变量是什么变量的语法1.定义变量使用变量 变量的类型1.整数2.浮点数(小数)3.字符串4.布尔5.其他 动态类型特征注释注释是什么注释的语法1.行注释2.文档字符串 注释的规范 常量和表达式 我们可以把python当作一个计算器&#xff0c;来进行一些算术…...

编程新知 2025/10/24 9:23:54

在ubuntu等linux系统上申请https证书

使用 Certbot 自动申请 安装 Certbot Certbot 是 Let’s Encrypt 官方推荐的自动化工具&#xff0c;支持多种操作系统和服务器环境。 在 Ubuntu/Debian 上&#xff1a; sudo apt update sudo apt install certbot申请证书 纯手动方式&#xff08;不自动配置&#xff09;&…...

编程新知 2025/8/19 10:28:58