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

经常用但是不知道什么是BFC？

news 2025/11/9 8:56:57

BFC学习

block formatting context 块级格式上下文

简单理解：

一个独立容器，内部布局不会受到外面的影响

形成条件：

1.浮动元素：float除none之外的值

2.绝对定位：position:absolute,fixed

3.display:inline-block,table-cell,table-caption,flex

4.overflow除visible之外的值（hidden,auto,sccroll)

5.body根元素

BFC特性

1.内部的盒子会在垂直方向上一个接一个的放置；他这里指的是很多个BFC的摆放

2.垂直方向上的距离由margin决定，同一个BFC中的两个相邻的标签外边距会发生重叠

前两点其实就是同一个BFC内部盒子和普通外部盒子排列一样，也有margin重叠的问题

      .float-item {width: 100%;height: 200px;background-color: greenyellow;margin: 20px;}.float-father {overflow: hidden;}<div class="float-father"><div class="float-item">1</div><div class="float-item">2</div></div>

3.BFC的区域不会与float的元素区域重叠

4.BFC盒子里面与外面互不影响

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

前两点就是它内部的盒子摆放规则和外面普通盒子一样，我们主要利用的是后三点

作用：

1 利用BFC避免margin重叠

情景：正常情况下父子盒子的margin会发生重叠，他会取大的；这时我让父盒子变为BFC，他们的边距就不会重叠了；兄弟盒子也一样，他们上下边会取大的，我们可以将一个盒子用父盒子包起来，给父盒子添加overflow:hidden

    <style>* {padding: 0;margin: 0;}.first {background-color: pink;height: 100px;margin-bottom: 20px;}.second {background-color: skyblue;height: 100px;margin-top: 50px;}</style><body><div class="first"></div><div class="second"></div></body>

给一个盒子包一层，并将父盒子变为BFC

      .father {overflow: hidden;}<div class="first"></div><div class="father"><div class="second"></div></div>

避免父子盒子margin重叠：

      .father {overflow: hidden; /* 让父盒子变为BFC就不会重叠了 */background-color: skyblue;margin-bottom: 20px;}.child {height: 20px;background-color: pink;margin-bottom: 50px;}<div class="father"><div class="child"></div></div><div>这是底下的盒子</div>

2 清除浮动，防止盒子塌陷；塌陷的原因是父盒子没有高度，over:flow能够清除浮动的原因：他触发了父盒 子的BFC,由于计算BFC的高度时，浮动元素也参与计算

如果子元素是position:absolute,父元素也是坍塌的,父元素overflow:hidden是撑不开的

      .float-item {float: left;width: 100%;height: 200px;background-color: greenyellow;}.float-father {overflow: hidden; /* 给父元素变为BFC解决高度坍塌问题，不加父盒子高度就撑不开，为0了 */}<div class="float-father"><div class="float-item"></div></div>

3 阻止元素被浮动元素所覆盖;让被覆盖的元素成为BFC

    <style>.item {font-size: 16px;height: 200px;border: 1px solid red;}.left {float: left;background-color: pink;width: 200px;}.right {background-color: skyblue;width: 360px;display:inline-block /* 将他变为BFC就不会被左侧浮动元素遮挡了 */}</style></head><body><div class="item left">左边的内容 左边的内容 左边的内容 左边的内容 左边的内容 左边的内容左边的内容 左边的内容 左边的内容 左边的内容 左边的内容 左边的内容</div><div class="item right">开始右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容</div>

右边的元素被左边的所遮挡，可以将右边元素变为BFC

相关文章：

经常用但是不知道什么是BFC？

BFC学习 block formatting context 块级格式上下文 简单理解&#xff1a; 一个独立容器&#xff0c;内部布局不会受到外面的影响 形成条件&#xff1a; 1.浮动元素&#xff1a;float除none之外的值 2.绝对定位&#xff1a;position:absolute,fixed 3.display:inline-blo…...

编程日记 2023/2/20 1:11:11

GO的临时对象池sync.Pool

GO的临时对象池sync.Pool 文章目录GO的临时对象池sync.Pool一、临时对象池&#xff1a;sync.Pool1.1 临时对象的特点1.2 临时对象池的用途1.3 sync.Pool 的用法二、临时对象池中的值会被及时清理掉2.1 池清理函数2.2 池汇总列表2.3 临时对象池存储值所用的数据结构2.4 临时对象…...

编程日记 2023/2/20 1:10:02

高精度算法一

目录 1. 基础知识 2. 大整数 大整数 3. 大整数 - 大整数 1. 基础知识 利用计算机进行数值计算&#xff0c;有时会遇到这样的问题&#xff1a;有些计算要求精度高&#xff0c;希望计算的数的位数可达几十位甚至几百位&#xff0c;虽然计算机的计算精度也算较高了&#xff0c…...

编程日记 2023/2/20 1:08:54

2023年全国最新食品安全管理员精选真题及答案1

百分百题库提供食品安全管理员考试试题、食品安全员考试预测题、食品安全管理员考试真题、食品安全员证考试题库等&#xff0c;提供在线做题刷题&#xff0c;在线模拟考试&#xff0c;助你考试轻松过关。 11.预包装食品的标签内容应使用规范的汉字&#xff0c;但可以同时使用&a…...

编程日记 2023/2/20 1:07:47

C++入门：引用

目录 一. 什么是引用 1.1 引用的概念 1.2 引用的定义 二. 引用的性质和用途 2.1 引用的三大主要性质 2.2 引用的主要应用 三. 引用的效率测试 3.1 传值调用和传引用调用的效率对比 3.2 值返回和引用返回的效率对比 四. 常引用 4.1 权限放大和权限缩小问题 4.2 跨…...

编程日记 2023/2/20 1:06:39

SpringSecurity的权限校验详解说明(附完整代码)

说明 SpringSecurity的权限校是基于SpringSecurity的安全认证的详解说明(附完整代码) &#xff08;https://blog.csdn.net/qq_51076413/article/details/129102660&#xff09;的讲解&#xff0c;如果不了解SpringSecurity是怎么认证&#xff0c;请先看下【SpringSecurity的安…...

编程日记 2023/2/20 1:05:32

Java-集合（5）

Map接口 JDK8 Map接口实现子类的特点 Map和Collection是并列关系&#xff0c;Map用于保存具有映射关系的数据&#xff1a;Key-ValueMap中的key和value可以是任何引用类型的数据&#xff0c;会封装到HashMap$Node对象中Map中的key不允许重复&#xff0c;原因和HashSet一样Map…...

编程日记 2023/2/20 1:04:25

研制过程评审活动（四）设计定型阶段

1、设计定型阶段主要任务 设计定型的主要任务是对武器装备性能和使用要求进行全面考核，以确认产品是否达到《研制任务书》和《研制合同》的要求。   设计定型阶段应最终确定《产品规范》、《工艺规范》和《材料规范》的正式版本，并形成正式的全套生产图样、有关技术文件及目…...

编程日记 2023/2/20 1:03:17

【Linux】进程替换

文章目录进程程序替换替换原理替换函数函数返回值函数命名理解在makefile文件中一次生成两个可执行文件总结:程序替换时运行其它语言程序进程程序替换 程序要运行要先加载到内存当中 , 如何做到? 加载器加载进来,然后程序替换 为什么? ->冯诺依曼 因为CPU读取数据的时候只…...

编程日记 2023/2/20 1:02:09

LeetCode171-Excel表列序号(进制转换问题)

LeetCode171-Excel表列序号1、问题描述2、解题思路&#xff1a;进制转换3、代码实现1、问题描述 给你一个字符串columnTitle,表示Excel表格中得列名称。返回该列名称对应得列序号。 例如&#xff1a; A -> 1 B -> 2 C -> 3 ... Z -> 26 AA -> 27 AB -> 28 …...

编程日记 2023/2/20 1:01:02

React SSR

ReactDOMServer 参考链接&#xff1a;https://zh-hans.reactjs.org/docs/react-dom-server.html ReactDOMServer 对象允许你将组件渲染成静态标记。通常&#xff0c;它被使用在 Node 服务端上 // ES modules import * as ReactDOMServer from react-dom/server; // CommonJS v…...

编程日记 2023/2/20 0:59:54

如何系统地优化页面性能

页面优化&#xff0c;其实就是要让页面更快地显示和响应。由于一个页面在它不同的阶段&#xff0c;所侧重的关注点是不一样的&#xff0c;所以如果要讨论页面优化&#xff0c;就要分析一个页面生存周期的不同阶段。 通常一个页面有三个阶段&#xff1a;加载阶段、交互阶段和关…...

编程日记 2023/2/20 0:58:43

Vulnhub 渗透练习（八）—— THE ETHER: EVILSCIENCE

环境搭建 环境下载 靶机和攻击机网络适配都选 NAT 即可。 信息收集 主机扫描 两个端口&#xff0c;22 和 80&#xff0c;且 apache httpd 2.4.0~2.4.29 存在换行解析漏洞。 Apache HTTPD是一款HTTP服务器&#xff0c;它可以通过mod_php来运行PHP网页。其2.4.0~2.4.29版本中…...

编程日记 2023/2/20 0:57:36

华为OD机试题 - 水仙花数 2（JavaScript）| 代码+思路+重要知识点

最近更新的博客 华为OD机试题 - 字符串加密（JavaScript） 华为OD机试题 - 字母消消乐（JavaScript） 华为OD机试题 - 字母计数（JavaScript） 华为OD机试题 - 整数分解（JavaScript） 华为OD机试题 - 单词反转（JavaScript） 使用说明 参加华为od机试，一定要注意不要完全背…...

编程日记 2023/2/20 0:56:29

字符设备驱动基础（二）

目录 一、五种IO模型------读写外设数据的方式 二、阻塞与非阻塞 三、多路复用 3.1 应用层&#xff1a;三套接口select、poll、epoll 3.2 驱动层&#xff1a;实现poll函数 四、信号驱动 4.1 应用层&#xff1a;信号注册fcntl 4.2 驱动层&#xff1a;实现fasync函数 一、…...

编程日记 2023/2/20 0:55:21

看见统计——第三章 概率分布

看见统计——第三章 概率分布 参考 https://github.com/seeingtheory/Seeing-Theory中心极限定理 概率分布描述了随机变量取值的规律。 随机变量Random Variables &#x1f525; 定义&#xff1a;将样本空间中的结果映射到实数的函数 XXX 称为随机变量(random variable)&a…...

编程日记 2023/2/20 0:54:08

【基于众包标注的语文教材句子难易度评估研究 论文精读】

基于众包标注的语文教材句子难易度评估研究 论文精读信息摘 要0 引言1 相关研究2 众包标注方法3 语料库构建3.1 数据收集3.1 基于五点量表的专家标注3.3 基于成对比较的众包标注4 特征及模型4.1 特征抽取4.2 模型与实验设计4.2.1 任务一:单句绝对难度评估4.2.2 任务二:句对相对…...

编程日记 2023/2/20 0:52:59

实例五：MATLAB APP design-APP登录界面的设计

一、APP 界面设计展示 注：在账号和密码提示框输入相应的账号和密码后，点击登录按钮，即可跳转到程序中设计的工作界面。 二、APP设计界面运行结果展示...

编程日记 2023/2/20 0:51:53

作用域和闭包：

1、LHS和RHS查询编译一段代码&#xff0c;需要js引擎和编译器&#xff08;js引擎负责整个程序运行时所需的各种资源的调度&#xff0c;编译器只是js引擎的一部分&#xff0c;负责将JavaScript源码编译成机器能识别的机器指令&#xff0c;然后交给引擎运行&#xff09;编译的过程…...

编程日记 2023/2/20 0:50:46

Vue常见面试题？

1、说说你对SPA单页面的理解&#xff0c;它的优缺点是什么&#xff1f; SPA(single-page application)仅在Web页面初始化时加载相应的HTML、JavaScript和CSS。一旦页面加载完成&#xff0c;SPA不会因为用户的操作而进行页面的重新加载或跳转&#xff1b;取而代之的是利用路由机…...

编程日记 2023/2/20 0:49:38

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

编程新知 2025/11/8 14:09:22

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

编程新知 2025/9/14 19:44:52

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤： 1）请求大小调整：首先，malloc 需要调整用户请求的大小，以适应内部数据结构（例如，可能需要存储额外的元数据）。通常，这包括对齐调整，确保分配的内存地址满足特定硬件要求（如对齐到8字节或16字节边界）。 2）空闲…...

编程新知 2025/11/1 5:21:39

脑机新手指南（八）：OpenBCI_GUI：从环境搭建到数据可视化（下）

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

编程新知 2025/7/31 5:34:43

逻辑回归：给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

编程新知 2025/10/27 21:25:04

JAVA后端开发——多租户

数据隔离是多租户系统中的核心概念&#xff0c;确保一个租户&#xff08;在这个系统中可能是一个公司或一个独立的客户&#xff09;的数据对其他租户是不可见的。在 RuoYi 框架&#xff08;您当前项目所使用的基础框架&#xff09;中&#xff0c;这通常是通过在数据表中增加一个…...

编程新知 2025/8/15 1:44:58

JS设计模式(4)：观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

编程新知 2025/9/1 6:48:07

Mysql8 忘记密码重置，以及问题解决

1.使用免密登录 找到配置MySQL文件&#xff0c;我的文件路径是/etc/mysql/my.cnf&#xff0c;有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

编程新知 2025/9/12 22:46:10

接口自动化测试：HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具&#xff0c;支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议&#xff0c;涵盖接口测试、性能测试、数字体验监测等测试类型…...

编程新知 2025/11/8 6:45:44

解读《网络安全法》最新修订，把握网络安全新趋势

《网络安全法》自2017年施行以来&#xff0c;在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂&#xff0c;网络攻击、数据泄露等事件频发&#xff0c;现行法律已难以完全适应新的风险挑战。 2025年3月28日&#xff0c;国家网信办会同相关部门起草了《网络安全…...

编程新知 2025/11/8 7:59:20